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

{% block content %}
    <h2 class="text-2xl font-semibold pb-4">
        Meine Buchungen
    </h2>
    <div class="space-y-8">
        {% for booking in bookings %}
            <div class="p-4 border border-gray-300 rounded-md overflow-hidden" {{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden' }) }}>
                <div role="button" class="flex items-center justify-between py-2" {{ stimulus_action('toggle', 'toggle', 'click') }}>
                    <div class="text-lg md:text-xl font-semibold">
                        {% if booking.travelData %}
                            {{ booking.travel }}, {{ booking.travelData.dateFrom | date('d.m.Y') }} - {{ booking.travelData.dateTo | date('d.m.Y') }}
                        {% else %}
                            {{ booking.travel }}, {{ booking.travelDate | date('d.m.Y') }}
                        {% endif %}
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" {{ stimulus_target('toggle', 'icon') }}>
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                    </svg>
                </div>
                <div class="flex flex-col space-y-4 sm:flex-row sm:items-start sm:space-x-2" {{ stimulus_target('toggle', 'toggle') }}>
                    <div class="flex-1 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                        <div>
                            <div class="font-semibold pb-2">
                                Buchungsdatum
                            </div>
                            {{ booking.bookingDate | date('d.m.Y') }}
                        </div>
                        <div>
                            <div class="font-semibold pb-2">
                                Buchungsnummer
                            </div>
                            {{ booking.bookingNumber }}
                        </div>
                        <div>
                            <div class="font-semibold pb-2">
                                Reisepreis
                            </div>
                            {{ booking.price|format_currency('EUR') }}/<br>{{ booking.balance ? booking.balance|format_currency('EUR') : '-' }}
                        </div>
                        <div>
                            <div class="font-semibold pb-2">
                                Status
                            </div>
                            {{ booking.status }}
                        </div>
                    </div>
                    <div class="flex sm:flex-col space-x-2 sm:space-x-0 sm:space-y-1">
                        {% if booking.editable %}
                            <a href="{{ path('app_booking_edit', { 'id': booking.id }) }}"
                               class="btn btn--small btn--secondary">
                                bearbeiten
                            </a>
                        {% endif %}
                        <a href="{{ path('app_booking_confirmation', { 'id': booking.id }) }}"
                           class="btn btn--small"
                           target="_blank">
                            Bestätigung
                        </a>
                        <a href="{{ path('app_booking_documents', { 'id': booking.id }) }}"
                           class="btn btn--small"
                           target="_blank">
                            Reisedokumente
                        </a>
                    </div>
                </div>
            </div>
        {% else %}
            <div>
                Keine Daten
            </div>
        {% endfor %}
    </div>
{% endblock %}