working better, small changes

ht_booking/assets/views/admin/courts.html

@@ -8,6 +8,10 @@
   <a href="/admin" class="text-sm text-blue-600 hover:underline">&larr; {{ t(key="back-to-calendar", lang=lang) }}</a>
 </div>
 
+{% if name_error %}
+<div class="mb-3 rounded bg-red-100 px-3 py-2 text-sm text-red-700">{{ t(key="court-delete-error", lang=lang) }}</div>
+{% endif %}
+
 <div class="mb-6 overflow-auto rounded-lg border bg-white">
   <table class="w-full text-sm">
     <thead>
@@ -15,6 +19,7 @@
         <th class="p-2">{{ t(key="court-name", lang=lang) }}</th>
         <th class="p-2">{{ t(key="court-surface", lang=lang) }}</th>
         <th class="p-2">{{ t(key="court-indoor", lang=lang) }}</th>
+        <th class="p-2">{{ t(key="court-remove", lang=lang) }}</th>
       </tr>
     </thead>
     <tbody>
@@ -23,6 +28,15 @@
         <td class="p-2">{{ c.name }}</td>
         <td class="p-2">{{ c.surface }}</td>
         <td class="p-2">{{ c.indoor }}</td>
+        <td class="p-2">
+          <form method="post" action="/admin/courts/{{ c.id }}/delete"
+            data-court-name="{{ c.name }}" onsubmit="return promptCourtDelete(this);">
+            <input type="hidden" name="confirm_name">
+            <button class="rounded bg-red-600 px-3 py-1 text-sm text-white hover:bg-red-700">
+              {{ t(key="delete", lang=lang) }}
+            </button>
+          </form>
+        </td>
       </tr>
       {% endfor %}
     </tbody>
@@ -49,3 +63,20 @@
   </form>
 </div>
 {% endblock content %}
+
+{% block js %}
+<script>
+  // The name confirmation appears only after the Delete button is pressed.
+  function promptCourtDelete(form) {
+    var expected = form.dataset.courtName;
+    var typed = prompt('{{ t(key="court-delete-prompt", lang=lang) }}\n\n' + expected);
+    if (typed === null) return false; // cancelled
+    if (typed.trim() !== expected) {
+      alert('{{ t(key="court-delete-mismatch", lang=lang) }}');
+      return false;
+    }
+    form.confirm_name.value = typed.trim();
+    return true;
+  }
+</script>
+{% endblock js %}