{% extends "base.html" %}

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

{% block content %}
<div class="mx-auto max-w-md">
  <div class="mb-4 flex items-center justify-between">
    <h1 class="text-2xl font-bold">{{ t(key="booking-details", lang=lang) }}</h1>
    <a href="/admin?court={{ court_id }}&week={{ date }}" class="btn btn-ghost btn-sm">« {{ t(key="back-to-calendar", lang=lang) }}</a>
  </div>

  <div class="card border border-base-300 bg-base-100 shadow-sm">
    <div class="card-body gap-0">
      <dl class="divide-y divide-base-300">
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-sm opacity-70">{{ t(key="court-label", lang=lang) }}</dt>
          <dd class="text-right text-sm font-medium">{{ court_name }}</dd>
        </div>
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-sm opacity-70">{{ t(key="date", lang=lang) }}</dt>
          <dd class="text-right text-sm font-medium">{{ date_label }}</dd>
        </div>
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-sm opacity-70">{{ t(key="hour", lang=lang) }}</dt>
          <dd class="text-right text-sm font-medium">{{ hour_label }}</dd>
        </div>
        <div class="flex items-center justify-between gap-4 py-2">
          <dt class="text-sm opacity-70">{{ t(key="booking-color", lang=lang) }}</dt>
          <dd class="flex items-center gap-2">
            <span class="inline-block h-5 w-8 rounded border border-base-300" style="background-color: {{ color }}"></span>
            <span class="text-sm font-medium">{{ color }}</span>
          </dd>
        </div>
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-sm opacity-70">{{ t(key="booking-name", lang=lang) }}</dt>
          <dd class="text-right text-sm font-medium">{{ name }}</dd>
        </div>
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-sm opacity-70">{{ t(key="booking-title", lang=lang) }}</dt>
          <dd class="text-right text-sm font-medium">{% if title %}{{ title }}{% else %}<span class="opacity-40">—</span>{% endif %}</dd>
        </div>
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-sm opacity-70">{{ t(key="booking-contact", lang=lang) }}</dt>
          <dd class="text-right text-sm font-medium">{% if contact %}{{ contact }}{% else %}<span class="opacity-40">—</span>{% endif %}</dd>
        </div>
        <div class="flex justify-between gap-4 py-2">
          <dt class="text-sm opacity-70">{{ t(key="booking-note", lang=lang) }}</dt>
          <dd class="whitespace-pre-line text-right text-sm font-medium">{% if note %}{{ note }}{% else %}<span class="opacity-40">—</span>{% endif %}</dd>
        </div>
      </dl>
      <div class="flex items-center gap-2 pt-4">
        <a href="/admin/booking/{{ booking_id }}/edit" class="btn btn-neutral">{{ t(key="edit", lang=lang) }}</a>
        <a href="/admin?court={{ court_id }}&week={{ date }}" class="btn btn-ghost">{{ t(key="back-to-calendar", lang=lang) }}</a>
      </div>
    </div>
  </div>
</div>
{% endblock content %}