{% 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="text-sm text-blue-600 hover:underline">&larr; {{ t(key="back-to-calendar", lang=lang) }}</a>
</div>

<div class="mb-6 overflow-auto rounded-lg border bg-white">
  <table class="w-full text-sm">
    <thead>
      <tr class="bg-gray-100 text-left">
        <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>
      </tr>
    </thead>
    <tbody>
      {% for c in courts %}
      <tr class="border-t">
        <td class="p-2">{{ c.name }}</td>
        <td class="p-2">{{ c.surface }}</td>
        <td class="p-2">{{ c.indoor }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<div class="max-w-md rounded-lg border bg-white p-4">
  <h2 class="mb-3 font-semibold">{{ t(key="add-court", lang=lang) }}</h2>
  <form method="post" action="/admin/courts" class="space-y-3">
    <div>
      <label class="block text-sm text-gray-600">{{ t(key="court-name", lang=lang) }}</label>
      <input name="name" required class="w-full rounded border-gray-300 text-sm">
    </div>
    <div>
      <label class="block text-sm text-gray-600">{{ t(key="court-surface", lang=lang) }}</label>
      <input name="surface" class="w-full rounded border-gray-300 text-sm">
    </div>
    <label class="flex items-center gap-2 text-sm">
      <input type="checkbox" name="indoor" value="1"> {{ t(key="court-indoor", lang=lang) }}
    </label>
    <button class="rounded bg-gray-900 px-4 py-2 text-sm text-white hover:bg-gray-700">
      {{ t(key="add-court", lang=lang) }}
    </button>
  </form>
</div>
{% endblock content %}