Refactor condition form: streamline JavaScript loading and enhance button layout for improved usability

atlas/templates/atlas/condition_form.html

@@ -1,27 +1,25 @@
 {% extends "atlas/base.html" %}
-<!-- {% load static from static %} -->
+{% load crispy_forms_tags %}
+
+{% block css %}{% endblock %}
 
-{% block css %}
-{% endblock %}
 {% block js %}
-    <!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
-    {{form.media}}
-
-    <script type="text/javascript">
-    </script>
-
-    <!-- {{ form.media }} -->
+    {{ form.media }}
 {% endblock %}
+
 {% block content %}
-    <h2>Add/Edit Condition</h2>
+    <h2>Add / Edit Condition</h2>
     <p>Use this form to create or edit a condition.</p>
     <p>Please check if it already <a href='{% url "atlas:condition_view" %}'>exists</a> before doing so!</p>
+
     <form action="" method="post" enctype="multipart/form-data" id="condition-form">
         {% csrf_token %}
+        {% crispy form %}
 
-        <table>
-            {{ form.as_table }}
-        </table>
-        <input type="submit" class="submit-button" value="Submit" name="submit">
+        <div class="mt-3">
+            <button type="submit" class="btn btn-primary">Submit</button>
+            <a class="btn btn-secondary ms-2" href="{% url 'atlas:condition_view' %}">Cancel</a>
+        </div>
     </form>
+
 {% endblock %}