Add confirmation before deleting game

games/templates/cotton/button.html

@@ -1,8 +1,8 @@
 <c-vars color="blue" size="base" type="button" />
 <button
-        {% if hx_get %}hx_get="{{ hx_get }}"{% endif %}
-        {% if hx_target %}hx_target="{{ hx_target }}"{% endif %}
-        {% if hx_swap %}hx_swap="{{ hx_swap }}"{% endif %}
+        {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
+        {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
+        {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
         {% if type %}type="{{ type }}"{% endif %}
         {% if title %}title="{{ title }}"{% endif %}
         {% if onclick %}onclick="{{ onclick }}"{% endif %}

games/templates/cotton/layouts/base.html

@@ -46,7 +46,7 @@
              alt="loading indicator" />
         <div class="flex flex-col min-h-screen">
             {% include "navbar.html" %}
-            <div class="flex flex-1 flex-col pt-8 pb-16">{{ slot }}</div>
+            <div id="main-container" class="flex flex-1 flex-col pt-8 pb-16">{{ slot }}</div>
             {% load version %}
             <span class="fixed left-2 bottom-2 text-xs text-slate-300 dark:text-slate-600">{% version %} ({% version_date %})</span>
         </div>
@@ -106,7 +106,8 @@
                 }
             });
         </script>
-   <div id="global-modal-container"></div>
+    // hx-swap-oob makes sure the modal gets removed upon any HTMX response
+   <div id="global-modal-container" hx-swap-oob="true"></div>
 
     <div x-data="toastStore()"
          role="region"

games/templates/partials/delete_game_confirmation.html

@@ -0,0 +1,36 @@
+<div id="delete-game-confirmation-modal" class="fixed inset-0 bg-black/70 dark:bg-gray-600/50 overflow-y-auto h-full w-full flex items-center justify-center">
+    <div class="relative mx-auto p-5 border-accent border w-full max-w-md shadow-lg/50 rounded-md bg-white dark:bg-gray-900">
+        <div class="">
+            <h1 class="text-2xl leading-6 font-medium dark:text-white text-center">Delete Game</h1>
+            <p class="dark:text-white text-center mt-5">
+                Are you sure you want to delete <strong>{{ game.name }}</strong>?
+            </p>
+            <form class=""
+                hx-post="{% url 'games:delete_game' game.id %}"
+                hx-replace-url="true"
+                hx-target="#main-container"
+                hx-select="#main-container"
+                hx-swap="outerHTML"
+                hw-swap-oob="#global-modal-container"
+                >
+                {% csrf_token %}
+                <p class="dark:text-white text-center mt-3 text-sm text-gray-600 dark:text-gray-400">
+                    This will permanently delete this game and all associated data:
+                </p>
+                <ul class="dark:text-white text-center mt-1 text-sm text-gray-600 dark:text-gray-400 list-disc list-inside">
+                    {% if session_count %}<li>{{ session_count }} session(s)</li>{% endif %}
+                    {% if purchase_count %}<li>{{ purchase_count }} purchase(s)</li>{% endif %}
+                    {% if playevent_count %}<li>{{ playevent_count }} play event(s)</li>{% endif %}
+                    {% if not session_count and not purchase_count and not playevent_count %}<li>No associated data</li>{% endif %}
+                </ul>
+                <p class="dark:text-white text-center mt-3 text-sm font-medium text-red-600 dark:text-red-400">
+                    This action cannot be undone.
+                </p>
+                <div class="items-center mt-5">
+                    <c-button color="red" size="lg" type="submit" class="w-full">Delete</c-button>
+                    <c-button color="gray" size="base" class="mt-0 w-full" onclick="this.closest('#delete-game-confirmation-modal').remove()">Cancel</c-button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>

games/templates/view_game.html

@@ -127,7 +127,7 @@
                         Edit
                     </button>
                 </a>
-                <a href="{% url 'games:delete_game' game.id %}">
+                <a href="#" hx-get="{% url 'games:delete_game_confirmation' game.id %}" hx-target="#global-modal-container">
                     <button type="button"
                             class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-e-lg hover:bg-red-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:border-gray-700 dark:text-white dark:hover:text-white dark:hover:bg-red-700 dark:focus:ring-blue-500 dark:focus:text-white hover:cursor-pointer">
                         Delete