rewrite the customer creation process to a modal

customers/templates/customers/customer_list.html

@@ -5,7 +5,8 @@
 {% if request.user.is_superuser %}
 <div class="row mb-3">
     <div class="col">
-        <button hx-get="{% url 'htmx_create_customer' %}" hx-target="#htmx-create-customer" class="btn btn-primary">Add Customer</button>
+        <button hx-get="{% url 'htmx_create_customer' %}" hx-target="#htmx-create-customer" class="btn btn-primary"
+            _="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Add Customer</button>
     </div>
     <div class="col" id="htmx-create-customer"></div>
 </div>
@@ -17,5 +18,20 @@
         </div>
     </div>
 </div>
+<script>
+    function closeModal() {
+        var container = document.getElementById("htmx-create-customer")
+        var backdrop = document.getElementById("modal-backdrop")
+        var modal = document.getElementById("modal")
+
+        modal.classList.remove("show")
+        backdrop.classList.remove("show")
+
+        setTimeout(function () {
+            container.removeChild(backdrop)
+            container.removeChild(modal)
+        }, 200)
+    }
+</script>
 
 {% endblock %}

customers/templates/customers/partials/customer_create.html

@@ -1,12 +1,22 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<div class="row">
-    <form method="post">
-        {% csrf_token %}
-        {{ form|crispy }}
-        <button type="submit" class="btn btn-primary" hx-post="{% url 'htmx_create_customer' %}" hx-target="#htmx-create-customer">Save</button>
-        <a href="{% url 'customers' %}" class="btn btn-secondary">Cancel</a>
-    </form>
+<div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
+<div id="modal" class="modal fade show" tabindex="-1" style="display:block;">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Add Customer</h5>
+            </div>
+            <div class="modal-body">
+                <form method="post">
+                    {% csrf_token %}
+                    {{ form|crispy }}
+                    <button type="submit" class="btn btn-primary" hx-post="{% url 'htmx_create_customer' %}" hx-target="#htmx-create-customer">Save</button>
+                    <button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
+                </form>
+            </div>
+        </div>
+    </div>
 </div>
 {% endblock %}