{% extends 'layout.html.twig' %}

{% block title %}Meine Buchungen · E&P Platz{% endblock %}

{% block content %}
    <a class="text-sm text-gray-500 hover:text-gray-900" href="{{ path('app_dashboard') }}">← Übersicht</a>

    <h1 class="pt-2">Meine Buchungen</h1>
    <p class="subline">Alles, was ab heute für dich reserviert ist.</p>

    {#
        Swapped out of band by Booking\MonthController when you page the month. It owns a stable id
        and emits hx-swap-oob only when rendered through htmxOobResponse -- rendered normally it is
        plain markup. Same idiom as board/index.html.twig.
    #}
    {% block calendar %}
        <div id="booking-calendar" class="mt-8"{% if htmx_oob_swap is defined and htmx_oob_swap %} hx-swap-oob="true"{% endif %}>
            {% include 'booking/_calendar.html.twig' %}
        </div>
    {% endblock %}

    {% if series is not empty %}
        <h2 class="pt-8">Wiederkehrende Buchungen</h2>
        <ul class="divide-y divide-gray-200 border-y border-gray-200">
            {% for entry in series %}
                <li class="flex items-center justify-between gap-4 py-3">
                    <div>
                        <div class="font-semibold">
                            {{ entry.resource.label }}
                            {%- if entry.resource.group %} <span class="font-normal text-gray-500">· {{ entry.resource.group.label }}</span>{% endif %}
                        </div>
                        <div class="text-sm text-gray-500">
                            {{ entry.describe }} · bis {{ entry.endDate|format_datetime(pattern: 'd. MMMM y') }}
                        </div>
                    </div>
                    {# Opens the confirmation modal; the CSRF token and the actual POST live in
                       there, which is why this row carries neither a form nor a token. #}
                    <button type="button" class="button button--small button--neutral"
                            hx-get="{{ path('app_series_end', { id: entry.id, return: 'bookings' }) }}"
                            hx-target="body"
                            hx-swap="beforeend">
                        Wiederholung beenden
                    </button>
                </li>
            {% endfor %}
        </ul>
    {% endif %}

    <h2 class="pt-8">Termine</h2>

    {% if bookings is empty %}
        <p class="text-sm text-gray-500">
            Noch nichts gebucht. <a class="underline" href="{{ path('app_dashboard') }}">Zur Übersicht</a>.
        </p>
    {% else %}
        <ul class="divide-y divide-gray-200 border-y border-gray-200">
            {% for booking in bookings %}
                <li class="flex items-center justify-between gap-4 py-3">
                    <div>
                        <div class="font-semibold">
                            {{ booking.date|format_datetime(pattern: 'EEEE, d. MMMM y') }}
                            <span class="font-normal text-gray-500">· {{ booking.timeRange }}</span>
                        </div>
                        <div class="text-sm text-gray-500">
                            {{ booking.resource.type.label }} · {{ booking.resource.label }}
                            {%- if booking.resource.group %} · {{ booking.resource.group.label }}{% endif %}
                            {% if booking.partOfSeries %}
                                <span class="badge bg-gray-100 text-gray-600 ml-1">wiederkehrend</span>
                            {% endif %}
                            {% if booking.overridden %}
                                <span class="badge bg-amber-100 text-amber-800 ml-1">abweichend</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="flex items-center gap-3">
                        <a class="text-sm underline"
                           href="{{ path('app_board', { type: booking.resource.type.value, date: booking.date|date('Y-m-d') }) }}">Im Plan</a>
                        {# ?return=bookings: this page has no board fragments to swap, so the
                           confirmed release navigates back here instead. #}
                        <button type="button" class="button button--small button--neutral"
                                hx-get="{{ path('app_booking_release', { id: booking.id, return: 'bookings' }) }}"
                                hx-target="body"
                                hx-swap="beforeend">
                            Freigeben
                        </button>
                    </div>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endblock %}