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

{% block content %}
    <h2 class="text-2xl font-semibold pb-4">
        Meine Buchungen
    </h2>
    <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">
                Reise
            </th>
            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                Buchungsdatum
            </th>
            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                Buchungsnummer
            </th>
            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                Reisepreis
            </th>
            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                offen
            </th>
            <th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
                Status
            </th>
            <th>
            </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">
                    {% 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 %}
                </td>
                <td class="border-r border-zinc-200 px-2 py-1 md:p-2"
                    data-label="Buchungsdatum">
                    {{ booking.bookingDate | date('d.m.Y') }}
                </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 }) }}"
                               class="button bg-button bg-button--secondary button--small">
                                bearbeiten
                            </a>
                        {% endif %}
                        <a href="{{ path('app_booking_confirmation', { 'id': booking.id }) }}"
                           class="button bg-button button--small"
                           target="_blank">
                            Bestätigung
                        </a>
                        <a href="{{ path('app_booking_documents', { 'id': booking.id }) }}"
                           class="button bg-button button--small"
                           target="_blank">
                            Reisedokumente
                        </a>
                    </div>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% endblock %}