{% extends "base.html" %}

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

{% block content %}
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
  <h1 class="text-2xl font-bold">
    {% if is_admin %}{{ t(key="admin-title", lang=lang) }}{% else %}{{ t(key="calendar-title", lang=lang) }}{% endif %}
  </h1>
  {% if has_courts %}
  <form method="get" action="{{ base_path }}" class="flex items-center gap-2">
    <label class="text-sm text-gray-600">{{ t(key="court-label", lang=lang) }}</label>
    <input type="hidden" name="week" value="{{ week }}">
    <select name="court" onchange="this.form.submit()" class="rounded border-gray-300 text-sm">
      {% for c in courts %}
      <option value="{{ c.id }}" {% if c.selected %}selected{% endif %}>{{ c.name }}</option>
      {% endfor %}
    </select>
  </form>
  {% endif %}
</div>

{% if has_courts %}
<div class="mb-3 flex flex-wrap items-center justify-between gap-2">
  <div class="flex gap-2">
    <a href="{{ base_path }}?court={{ court_id }}&week={{ prev_week }}"
      class="rounded border bg-white px-3 py-1 text-sm hover:bg-gray-100">&larr; {{ t(key="prev-week", lang=lang) }}</a>
    <a href="{{ base_path }}?court={{ court_id }}&week={{ this_week }}"
      class="rounded border bg-white px-3 py-1 text-sm hover:bg-gray-100">{{ t(key="this-week", lang=lang) }}</a>
    <a href="{{ base_path }}?court={{ court_id }}&week={{ next_week }}"
      class="rounded border bg-white px-3 py-1 text-sm hover:bg-gray-100">{{ t(key="next-week", lang=lang) }} &rarr;</a>
  </div>
  <div class="text-sm font-medium text-gray-600">{{ court_name }} · {{ week_label }}</div>
</div>

<div class="overflow-auto rounded-lg border bg-white">
  <table class="w-full border-collapse text-sm">
    <thead>
      <tr class="bg-gray-100">
        <th class="w-16 border p-2"></th>
        {% for d in days %}
        <th class="border p-2 text-center">
          <div class="font-semibold">{{ t(key=d.key, lang=lang) }}</div>
          <div class="text-xs font-normal text-gray-500">{{ d.num }}</div>
        </th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for row in rows %}
      <tr>
        <td class="border p-2 text-center font-medium text-gray-500">{{ row.hour_label }}</td>
        {% for cell in row.cells %}
        <td class="h-14 border p-1 align-top">
          {% if cell.booked %}
            {% if is_admin %}
          <a href="/admin/booking/{{ cell.booking_id }}"
            class="block h-full rounded px-1 py-1 text-xs font-medium text-white"
            style="background-color: {{ cell.color }}">{{ cell.name }}</a>
            {% else %}
          <div class="h-full rounded px-1 py-1 text-xs font-medium text-white"
            style="background-color: {{ cell.color }}" title="{{ cell.name }}">{{ t(key="booked", lang=lang) }}</div>
            {% endif %}
          {% else %}
            {% if is_admin %}
          <a href="/admin/booking?court={{ court_id }}&date={{ cell.date }}&hour={{ cell.hour }}"
            class="block h-full rounded px-1 py-1 text-xs text-gray-400 hover:bg-gray-100">+</a>
            {% else %}
          <div class="h-full px-1 py-1 text-xs text-gray-300">{{ t(key="free", lang=lang) }}</div>
            {% endif %}
          {% endif %}
        </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="rounded-lg border bg-white p-8 text-center text-gray-500">{{ t(key="no-courts", lang=lang) }}</div>
{% endif %}
{% endblock content %}