From 14a4846948e101c6ad3edfc767059a36daec59fb Mon Sep 17 00:00:00 2001
From: Flo Hartmann <B0rbor4d@gmail.com>
Date: Wed, 26 Aug 2026 08:35:18 +0000
Subject: [PATCH] =?UTF-8?q?P0:=20L=C3=B6sch-Aktionen=20mit=20Best=C3=A4tig?=
 =?UTF-8?q?ungsdialog=20(Planung=20+=20Erinnerungen)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Alpine-Modal 'Eintrag löschen?' mit Abbrechen/Löschen; ohne JavaScript
sendet das Formular wie bisher direkt (Progressive Enhancement).
benutzer/liste.html hat keine Lösch-Aktion — nichts zu tun.
---
 .../templates/erinnerung/index.html           | 26 +++++++++++++++-
 plugins/planung/templates/planung/index.html  | 30 +++++++++++++++++--
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/plugins/erinnerung/templates/erinnerung/index.html b/plugins/erinnerung/templates/erinnerung/index.html
index f16bffc..db23fc6 100644
--- a/plugins/erinnerung/templates/erinnerung/index.html
+++ b/plugins/erinnerung/templates/erinnerung/index.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
 {% block inhalt %}
+<div x-data="{ loeschFormular: null, loeschTitel: '' }">
 <h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
 <p class="text-slate-600 mb-4">
   Redaktionsschl&uuml;sse der kommenden Ausgaben. Vier Wochen vor jedem
@@ -75,7 +76,9 @@
           <div class="flex flex-wrap items-center gap-1.5">
             <a href="/erinnerung/ausgaben/{{ zeile.ausgabe.id }}/bearbeiten"
                class="text-xs border border-slate-300 hover:border-emerald-600 hover:text-emerald-700 px-2 py-1 rounded-lg whitespace-nowrap">Bearbeiten</a>
-            <form method="post" action="/erinnerung/ausgaben/{{ zeile.ausgabe.id }}/loeschen">
+            <form method="post" action="/erinnerung/ausgaben/{{ zeile.ausgabe.id }}/loeschen"
+                data-titel="{{ zeile.ausgabe.name }}"
+                @submit.prevent="loeschTitel = $event.target.dataset.titel; loeschFormular = $event.target">
               <button type="submit" class="text-xs border border-red-200 text-red-600 hover:bg-red-50 px-2 py-1 rounded-lg whitespace-nowrap">L&ouml;schen</button>
             </form>
           </div>
@@ -141,4 +144,25 @@
   </div>
 </div>
 {% endif %}
+  <!-- Lösch-Bestätigungsdialog (Progressive Enhancement: ohne JavaScript
+       sendet das Formular sofort, mit Alpine öffnet sich dieser Dialog). -->
+  <div x-show="loeschFormular !== null" x-cloak
+       class="fixed inset-0 z-50 flex items-center justify-center p-4"
+       role="dialog" aria-modal="true" aria-labelledby="loesch-dialog-titel">
+    <div class="absolute inset-0 bg-slate-900/50" @click="loeschFormular = null"></div>
+    <div class="relative bg-white rounded-xl shadow-xl max-w-sm w-full p-5">
+      <h2 id="loesch-dialog-titel" class="text-base font-semibold text-slate-800 mb-1">Eintrag löschen?</h2>
+      <p class="text-sm text-slate-600 mb-4">
+        &bdquo;<span x-text="loeschTitel"></span>&ldquo; wird endgültig gelöscht.
+        Das lässt sich nicht rückgängig machen.
+      </p>
+      <div class="flex justify-end gap-2">
+        <button type="button" @click="loeschFormular = null"
+                class="px-4 py-2 rounded-lg border border-slate-300 text-sm hover:bg-slate-50">Abbrechen</button>
+        <button type="button" @click="if (loeschFormular) { loeschFormular.submit(); }"
+                class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium">Löschen</button>
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}
diff --git a/plugins/planung/templates/planung/index.html b/plugins/planung/templates/planung/index.html
index 499c11d..7eede4a 100644
--- a/plugins/planung/templates/planung/index.html
+++ b/plugins/planung/templates/planung/index.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% block titel %}{{ titel }} — Spiele-Redaktion{% endblock %}
 {% block inhalt %}
+<div x-data="{ loeschFormular: null, loeschTitel: '' }">
 <h1 class="text-2xl font-bold mb-2">{{ titel }}</h1>
 <p class="text-slate-600 mb-4">
   Planungsliste der Redaktion: wer reviewt welches Spiel f&uuml;r welche Ausgabe.
@@ -119,7 +120,9 @@
         {% endif %}
         <a href="/planung/{{ eintrag.id }}/bearbeiten"
            class="min-h-[44px] inline-flex items-center justify-center border border-slate-300 hover:border-emerald-600 hover:text-emerald-700 px-3 py-2 rounded-lg text-sm whitespace-nowrap">Bearbeiten</a>
-        <form method="post" action="/planung/{{ eintrag.id }}/loeschen">
+        <form method="post" action="/planung/{{ eintrag.id }}/loeschen"
+        data-titel="{{ eintrag.titel }}"
+        @submit.prevent="loeschTitel = $event.target.dataset.titel; loeschFormular = $event.target">
           <button type="submit" class="w-full min-h-[44px] inline-flex items-center justify-center border border-red-200 text-red-600 hover:bg-red-50 px-3 py-2 rounded-lg text-sm whitespace-nowrap">L&ouml;schen</button>
         </form>
       </div>
@@ -205,7 +208,9 @@
             {% endif %}
             <a href="/planung/{{ eintrag.id }}/bearbeiten"
                class="text-xs border border-slate-300 hover:border-emerald-600 hover:text-emerald-700 px-2.5 py-2 rounded-lg whitespace-nowrap">Bearbeiten</a>
-            <form method="post" action="/planung/{{ eintrag.id }}/loeschen">
+            <form method="post" action="/planung/{{ eintrag.id }}/loeschen"
+        data-titel="{{ eintrag.titel }}"
+        @submit.prevent="loeschTitel = $event.target.dataset.titel; loeschFormular = $event.target">
               <button type="submit" class="text-xs border border-red-200 text-red-600 hover:bg-red-50 px-2.5 py-2 rounded-lg whitespace-nowrap">L&ouml;schen</button>
             </form>
           </div>
@@ -231,4 +236,25 @@
   <div class="py-6 text-center text-sm text-slate-400">Lade weitere Eintr&auml;ge&nbsp;&hellip;</div>
 </div>
 {% endif %}
+  <!-- Lösch-Bestätigungsdialog (Progressive Enhancement: ohne JavaScript
+       sendet das Formular sofort, mit Alpine öffnet sich dieser Dialog). -->
+  <div x-show="loeschFormular !== null" x-cloak
+       class="fixed inset-0 z-50 flex items-center justify-center p-4"
+       role="dialog" aria-modal="true" aria-labelledby="loesch-dialog-titel">
+    <div class="absolute inset-0 bg-slate-900/50" @click="loeschFormular = null"></div>
+    <div class="relative bg-white rounded-xl shadow-xl max-w-sm w-full p-5">
+      <h2 id="loesch-dialog-titel" class="text-base font-semibold text-slate-800 mb-1">Eintrag löschen?</h2>
+      <p class="text-sm text-slate-600 mb-4">
+        &bdquo;<span x-text="loeschTitel"></span>&ldquo; wird endgültig gelöscht.
+        Das lässt sich nicht rückgängig machen.
+      </p>
+      <div class="flex justify-end gap-2">
+        <button type="button" @click="loeschFormular = null"
+                class="px-4 py-2 rounded-lg border border-slate-300 text-sm hover:bg-slate-50">Abbrechen</button>
+        <button type="button" @click="if (loeschFormular) { loeschFormular.submit(); }"
+                class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-medium">Löschen</button>
+      </div>
+    </div>
+  </div>
+</div>
 {% endblock %}