{% extends "base.html" %}

{% block title %}{{ t(key="manage-courts", lang=lang) }}{% endblock title %}

{% block content %}
<div class="mb-4 flex items-center justify-between">
  <h1 class="text-2xl font-bold">{{ t(key="manage-courts", lang=lang) }}</h1>
  <a href="/admin" class="btn btn-ghost btn-sm">« {{ t(key="back-to-calendar", lang=lang) }}</a>
</div>

{% if name_error %}
<div class="alert alert-error mb-4">
  <span>{{ t(key="court-delete-error", lang=lang) }}</span>
</div>
{% endif %}

<div class="mb-6 overflow-x-auto rounded-lg border border-base-300 bg-base-100 shadow-sm">
  <table class="table">
    <thead>
      <tr>
        <th>{{ t(key="court-name", lang=lang) }}</th>
        <th>{{ t(key="court-surface", lang=lang) }}</th>
        <th>{{ t(key="court-indoor", lang=lang) }}</th>
        <th class="text-right">{{ t(key="court-remove", lang=lang) }}</th>
      </tr>
    </thead>
    <tbody>
      {% for c in courts %}
      <tr>
        <td class="font-medium">{{ c.name }}</td>
        <td>{{ c.surface }}</td>
        <td>
          {% if c.indoor %}
          <span class="badge badge-success badge-sm">✓</span>
          {% else %}
          <span class="badge badge-ghost badge-sm">—</span>
          {% endif %}
        </td>
        <td class="text-right">
          <form method="post" action="/admin/courts/{{ c.id }}/delete" class="inline"
            data-court-name="{{ c.name }}" onsubmit="return promptCourtDelete(this);">
            <input type="hidden" name="confirm_name">
            <button class="btn btn-error btn-sm">{{ t(key="delete", lang=lang) }}</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="card max-w-md border border-base-300 bg-base-100 shadow-sm">
  <div class="card-body">
    <h2 class="card-title text-base">{{ t(key="add-court", lang=lang) }}</h2>
    <form method="post" action="/admin/courts" class="space-y-2">
      <div class="form-control">
        <label class="label"><span class="label-text">{{ t(key="court-name", lang=lang) }}</span></label>
        <input name="name" required class="input input-bordered w-full">
      </div>
      <div class="form-control">
        <label class="label"><span class="label-text">{{ t(key="court-surface", lang=lang) }}</span></label>
        <input name="surface" class="input input-bordered w-full">
      </div>
      <div class="form-control">
        <label class="label cursor-pointer justify-start gap-3">
          <input type="checkbox" name="indoor" value="1" class="checkbox checkbox-sm">
          <span class="label-text">{{ t(key="court-indoor", lang=lang) }}</span>
        </label>
      </div>
      <button class="btn btn-neutral mt-1">{{ t(key="add-court", lang=lang) }}</button>
    </form>
  </div>
</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 %}