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

{% block content %}
    <h1 class="text-2xl font-semibold pb-4">
        Meine Buchungen
    </h1>
    {% include '_partials/_flashes.html.twig' %}
    <table class="w-full mb-4 responsive">
        <thead>
        <tr class="bg-zinc-200">
            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base" scope="col">
                Reise
            </th>
            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base" scope="col">
                Reisedatum
            </th>
            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base" scope="col">
                Buchungsnummer
            </th>
            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base" scope="col">
                Reisepreis
            </th>
            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base" scope="col">
                offen
            </th>
            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base" scope="col">
                Status
            </th>
            <th scope="col">
                <span class="sr-only">Aktionen</span>
            </th>
        </tr>
        </thead>
        <tbody>
        {% for booking in bookings %}
            <tr class="odd:bg-zinc-50 hover:bg-zinc-100 odd:hover:bg-zinc-100">
                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
                    data-label="Reise">
                    {{ booking.travelName }}
                </td>
                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
                    data-label="Buchungsdatum">
                    {% 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>
                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
                    data-label="Buchungsnummer">
                    {{ booking.bookingNumber }}
                </td>
                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
                    data-label="Reisepreis">
                    {{ booking.price|format_currency('EUR') }}
                </td>
                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
                    data-label="offen">
                    {{ booking.balance ? booking.balance|format_currency('EUR') : '-' }}
                </td>
                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
                    data-label="Status">
                    {{ booking.status|map_status }}
                </td>
                <td class="px-2 py-1 md:p-2">
                    <div class="flex md:flex-col space-x-2 md:space-x-0 md:space-y-1">
                        {% if booking.editable %}
                            <a href="{{ path('app_booking_edit', { 'id': booking.id }) }}"
                               {{ stimulus_action('loading', 'toggle') }}
                               class="button bg-button bg-button--secondary button--small">
                                bearbeiten
                            </a>
                        {% endif %}
                        <a href="{{ path('app_booking_invoice', { 'id': booking.id }) }}"
                           class="button bg-button button--small"
                           target="_blank">
                            Rechnung
                        </a>
                        {% if booking.travelInfoUrl is not null %}
                            <a href="{{ booking.travelInfoUrl }}"
                               class="button bg-button bg-pink button--small"
                               target="_blank">
                                Reiseinfos
                            </a>
                        {% endif %}
                    </div>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}