Add Crispy Forms integration to QuestionForm and update question_form template for improved layout and usability

sbas/templates/sbas/question_form.html

@@ -2,6 +2,7 @@
 
 {% load static %}
 {% load partials %}
+{% load crispy_forms_tags %}
 
 {% block js %}
   <!-- <script type="text/javascript" src="/admin/jsi18n/"></script> -->
@@ -11,19 +12,33 @@
   {{ form.media }}
 {% endblock %}
 {% block content %}
-  <div class="d-flex justify-content-between align-items-start mb-3 flex-column flex-md-row">
-    <div>
-      <h2>Submit Question</h2>
+  <div class="container py-3">
+    <div class="d-flex justify-content-between align-items-start mb-3 flex-column flex-md-row">
+      <div>
+        <h2 class="h4 mb-2">Submit Question</h2>
+      </div>
+      {% if question %}
+        {% include 'sbas/question_detail.html#links-partial' %}
+      {% endif %}
+    </div>
+
+    <div class="card">
+      <div class="card-body">
+        <form action="" method="post" enctype="multipart/form-data" id="anatomyquestion-form">
+          {% csrf_token %}
+
+          {{ form.media }}
+
+          <div class="mb-3">
+            {% crispy form %}
+          </div>
+
+          <div class="d-grid gap-2 d-md-flex justify-content-md-end">
+            <button type="submit" class="btn btn-primary">Submit</button>
+            <a href="{% url 'sbas:index' %}" class="btn btn-outline-secondary">Cancel</a>
+          </div>
+        </form>
+      </div>
     </div>
-    {% if question %}
-      {% include 'sbas/question_detail.html#links-partial' %}
-    {% endif %}
   </div>
-
-  <form action="" method="post" enctype="multipart/form-data" id="anatomyquestion-form">
-    {% csrf_token %}
-
-    <table>{{ form.as_table }}</table>
-    <input type="submit" class="submit-button" value="Submit" name="submit" />
-  </form>
 {% endblock %}