From 78377a7ae900f2639190761269f5d25dddd8c28d Mon Sep 17 00:00:00 2001
From: Victor Andersson <victor.andersson2@elev.ga.ntig.se>
Date: Sun, 9 Nov 2025 21:53:22 +0100
Subject: [PATCH] Switch edit overlay to modal dialog

---
 claims/templates/claims/dashboard.html | 65 +++++++++++---------------
 1 file changed, 28 insertions(+), 37 deletions(-)

diff --git a/claims/templates/claims/dashboard.html b/claims/templates/claims/dashboard.html
index 938da65..b69f10a 100644
--- a/claims/templates/claims/dashboard.html
+++ b/claims/templates/claims/dashboard.html
@@ -302,17 +302,17 @@
                 </div>
             {% endif %}
             {% if can_change %}
-                <div class="fixed inset-0 z-40 hidden items-center justify-center bg-black/60 p-4" data-edit-panel="{{ claim.id }}">
-                    <div class="w-full max-w-2xl rounded-3xl bg-white p-6 text-left shadow-2xl">
-                        <div class="flex items-center justify-between">
-                            <div>
-                                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">{% trans "Redigera utlägg" %}</p>
-                                <h3 class="text-xl font-semibold text-gray-900">{{ claim.full_name }}</h3>
-                            </div>
-                            <button type="button" data-close-edit class="rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-600 transition hover:bg-gray-200">
-                                {% trans "Stäng" %}
-                            </button>
+                <dialog class="w-full max-w-2xl rounded-3xl border-0 bg-white p-6 text-left shadow-2xl"
+                        data-edit-dialog="{{ claim.id }}">
+                    <div class="flex items-center justify-between">
+                        <div>
+                            <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">{% trans "Redigera utlägg" %}</p>
+                            <h3 class="text-xl font-semibold text-gray-900">{{ claim.full_name }}</h3>
                         </div>
+                        <button type="button" data-close-edit class="rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-600 transition hover:bg-gray-200">
+                            {% trans "Stäng" %}
+                        </button>
+                    </div>
                         <form method="post" class="mt-4 space-y-4">
                             {% csrf_token %}
                             <input type="hidden" name="action_type" value="edit">
@@ -370,8 +370,7 @@
                                 {% trans "Aktivera JavaScript för att kunna redigera uppgifter direkt här." %}
                             </p>
                         </noscript>
-                    </div>
-                </div>
+                </dialog>
             {% endif %}
         </div>
 
@@ -426,39 +425,31 @@
         </aside>
     </div>
 </section>
+<style>
+    dialog[data-edit-dialog]::backdrop {
+        background-color: rgba(15, 23, 42, 0.75);
+    }
+</style>
 <script>
 document.addEventListener("DOMContentLoaded", () => {
     const filterButtons = Array.from(document.querySelectorAll("[data-filter-button]"));
     const cards = Array.from(document.querySelectorAll("[data-claim-card]"));
     const emptyState = document.querySelector("[data-claim-empty]");
     const editButtons = Array.from(document.querySelectorAll("[data-open-edit]"));
-    const panels = Array.from(document.querySelectorAll("[data-edit-panel]"));
-    if (!filterButtons.length || !cards.length) {
-        // still set up edit panels if filters missing
-    }
-    if (editButtons.length) {
-        editButtons.forEach((button) => {
-            button.addEventListener("click", () => {
-                const target = document.querySelector(`[data-edit-panel="${button.dataset.openEdit}"]`);
-                if (target) {
-                    target.classList.remove("hidden");
-                    target.classList.add("flex");
-                }
-            });
-        });
-    }
-    panels.forEach((panel) => {
-        panel.addEventListener("click", (event) => {
-            if (event.target === panel) {
-                panel.classList.add("hidden");
-                panel.classList.remove("flex");
+    const dialogs = Array.from(document.querySelectorAll("[data-edit-dialog]"));
+    editButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+            const dialog = document.querySelector(`[data-edit-dialog="${button.dataset.openEdit}"]`);
+            if (dialog && typeof dialog.showModal === "function") {
+                dialog.showModal();
+            } else if (dialog) {
+                dialog.setAttribute("open", "open");
             }
         });
-        panel.querySelectorAll("[data-close-edit]").forEach((btn) => {
-            btn.addEventListener("click", () => {
-                panel.classList.add("hidden");
-                panel.classList.remove("flex");
-            });
+    });
+    dialogs.forEach((dialog) => {
+        dialog.querySelectorAll("[data-close-edit]").forEach((btn) => {
+            btn.addEventListener("click", () => dialog.close());
         });
     });