{% load i18n %}

<article data-cal-event-detail>
  <div class="flex items-center justify-between border-b border-gray-200 px-6 py-4">
    <h2 class="text-base font-semibold text-gray-900">{{ event.title }}</h2>
    <button type="button"
            class="text-gray-400 hover:text-gray-500"
            aria-label="{% trans 'Close' %}"
            onclick="window.dispatchEvent(new CustomEvent('close-modal'))">
      <svg xmlns="http://www.w3.org/2000/svg"
           fill="none"
           viewBox="0 0 24 24"
           stroke-width="1.5"
           stroke="currentColor"
           aria-hidden="true"
           class="size-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
      </svg>
    </button>
  </div>
  <div class="space-y-4 px-6 py-4 text-sm text-gray-700">
    {% if event.photo %}
      <img src="{{ event.photo.url }}"
           alt="{{ event.title }}"
           class="max-h-80 w-full rounded-md object-cover">
    {% endif %}
    <p>
      <time datetime="{{ start|date:'c' }}" class="font-medium text-gray-900">{{ start|date:"l j F Y" }}</time>
      <br>
      {% if start|date:"Ymd" == end|date:"Ymd" %}
        {{ start|time:"H:i" }} – <time datetime="{{ end|date:'c' }}">{{ end|time:"H:i" }}</time>
      {% else %}
        {{ start|time:"H:i" }} – <time datetime="{{ end|date:'c' }}">{{ end|date:"l j F Y" }} {{ end|time:"H:i" }}</time>
      {% endif %}
    </p>
    {% if event.location %}<p>{{ event.location }}</p>{% endif %}
    {% if event.description %}
      <div>{{ event.description|linebreaks }}</div>
    {% endif %}
  </div>
  <div class="flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4">
    <button type="button"
            class="rounded-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
            onclick="window.dispatchEvent(new CustomEvent('close-modal'))">
      {% trans "Close" %}
    </button>
    {% if can_edit %}
      <button type="button"
              hx-get="{% url 'htmx_calendar:edit_event' calendar_slug=calendar.slug event_pk=event.pk %}"
              hx-target="#dialog"
              hx-swap="innerHTML"
              class="rounded-md bg-accent px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-accent/80">
        {% trans "Edit" %}
      </button>
    {% endif %}
  </div>
</article>