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

{% block content %}
    <div class="flex-1 flex flex-col min-h-0">
        {# Header #}
        <div class="shrink-0 px-4 lg:px-8 py-8 lg:py-16">
            <h1 class="text-white uppercase pb-4">
                Meine<br>Buchungen
            </h1>
        </div>

        {# Scrollable content area #}
        <div class="flex-1 overflow-y-auto p-4 lg:p-8 bg-primary-bg">
            {% include '_partials/_flashes.html.twig' %}

            <div class="space-y-8 pb-8">
                {% for booking in bookings %}
                    <div class="grid md:grid-cols-2 gap-4 p-2 bg-white rounded-md">
                        <div class="flex items-start space-x-4">
                            <div class="w-12 h-12 inline-flex flex-shrink-0 items-center justify-center rounded-full bg-primary-dark text-white text-2xl font-bold">
                                {{ loop.index }}
                            </div>
                            <div class="text-xl font-semibold">
                                {{ booking.travelName }}
                            </div>
                        </div>
                        <div>
                            <table class="mb-4">
                                <tr>
                                    <th class="text-left border-r-2 border-gray-300 pr-2">
                                        Reisedatum
                                    </th>
                                    <td class="pl-2">
                                        {% if booking.travelData %}
                                            {{ booking.travelData.dateFrom|date('d.m.Y') }} - {{ booking.travelData.dateTo|date('d.m.Y') }}
                                        {% else %}
                                            {{ booking.travelDate|date('d.m.Y') }}
                                        {% endif %}
                                    </td>
                                </tr>
                                <tr>
                                    <th class="text-left border-r-2 border-gray-300 pr-2">
                                        Buchungsnr.
                                    </th>
                                    <td class="pl-2">
                                        {{ booking.bookingNumber }}
                                    </td>
                                </tr>
                                <tr>
                                    <th class="text-left border-r-2 border-gray-300">
                                        Reisepreis
                                    </th>
                                    <td class="pl-2">
                                        {{ booking.price|format_currency('EUR') }}
                                    </td>
                                </tr>
                                <tr>
                                    <th class="text-left border-r-2 border-gray-300">
                                        offen
                                    </th>
                                    <td class="pl-2">
                                        {{ booking.balance ? booking.balance|format_currency('EUR') : '-' }}
                                    </td>
                                </tr>
                                <tr>
                                    <th class="text-left border-r-2 border-gray-300">
                                        Status
                                    </th>
                                    <td class="pl-2">
                                        {{ booking.status|map_status }}
                                    </td>
                                </tr>
                            </table>
                            <div class="flex space-x-2">
                                {% if booking.editable %}
                                    <a href="{{ path('app_booking_edit_start', { 'id': booking.id }) }}"
                                       class="button button--primary button--small"
                                       title="Buchung bearbeiten">
                                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M92.69,216H48a8,8,0,0,1-8-8V163.31a8,8,0,0,1,2.34-5.65L165.66,34.34a8,8,0,0,1,11.31,0L221.66,79a8,8,0,0,1,0,11.31L98.34,213.66A8,8,0,0,1,92.69,216Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="136" y1="64" x2="192" y2="120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="164" y1="92" x2="68" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="95.49" y1="215.49" x2="40.51" y2="160.51" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                                    </a>
                                {% endif %}
                                <a href="{{ path('app_booking_invoice', { 'id': booking.id }) }}"
                                   class="button button--secondary button--small"
                                   title="Rechnung herunterladen"
                                   target="_blank">
                                    <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M64,56H40A16,16,0,0,0,24,72h0A16,16,0,0,0,40,88H56a16,16,0,0,1,16,16h0a16,16,0,0,1-16,16H28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="48" y1="48" x2="48" y2="56" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="48" y1="120" x2="48" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M96,56H224V192a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="104" y1="104" x2="224" y2="104" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="80" y1="152" x2="224" y2="152" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168" y1="104" x2="168" y2="200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                                </a>
                                {% if booking.travelInfoUrl is not null %}
                                    <a href="{{ booking.travelInfoUrl }}"
                                       class="button button--secondary button--small"
                                       title="zu den Reiseinfos"
                                       target="_blank">
                                        <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M120,120a8,8,0,0,1,8,8v40a8,8,0,0,0,8,8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="124" cy="84" r="12"/></svg>
                                    </a>
                                {% endif %}
                            </div>

                        </div>
                    </div>
                {% endfor %}
            </div>
            <a href="{{ path('app_account') }}" class="button button--secondary">
                zurück
            </a>
        </div>
    </div>
{% endblock %}