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

{% block title %}Meine Buchungen · ephub{% 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>

    {% if series is not empty %}
        <h2 class="pt-8">Serien</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 }}</div>
                        <div class="text-sm text-gray-500">
                            {{ entry.describe }} · bis {{ entry.endDate|format_datetime(pattern: 'd. MMMM y') }}
                        </div>
                    </div>
                    {# Ends the series from today on; past occurrences are history and stay put. #}
                    <form method="post" action="{{ path('app_series_end', { id: entry.id }) }}"
                          onsubmit="return confirm('Serie ab heute beenden? Alle künftigen Termine werden entfernt.')">
                        <input type="hidden" name="_token" value="{{ csrf_token('end-series-' ~ entry.id) }}">
                        <button type="submit" class="button button--small button--neutral">Serie beenden</button>
                    </form>
                </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.partOfSeries %}
                                <span class="badge bg-gray-100 text-gray-600 ml-1">Serie</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>
                        {# Ordinary form post: this page has no board fragments to swap, so it
                           reloads afterwards rather than pretending to be htmx. #}
                        <form method="post" action="{{ path('app_booking_release', { id: booking.id }) }}">
                            <input type="hidden" name="_token" value="{{ csrf_token('release-' ~ booking.id) }}">
                            <button type="submit" class="button button--small button--neutral">Freigeben</button>
                        </form>
                    </div>
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endblock %}