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

{% block content %}
    {{ form_start(form, {
        'attr': {
            'class': 'flex-1 flex flex-col min-h-0',
            'novalidate': 'novalidate'
        }
    }) }}
        {# Pagination - mobile only (above form) #}
        <div class="lg:hidden">
            {% include 'booking/_pagination.html.twig' with { 'current_step': 2 } %}
        </div>
        <div class="flex-1 flex flex-col lg:grid lg:grid-cols-5 min-h-0 relative">
            {# Summary - hidden on mobile, visible on desktop #}
            <div id="booking-summary"
                 class="hidden lg:block lg:order-2 lg:flex-1 lg:min-h-0 lg:col-span-2">
                {% include 'booking/_summary.html.twig' with {
                    'bookingDto': bookingCreateContext.bookingDto,
                    'summaryData': bookingCreateContext.summaryData
                } %}
            </div>

            {# Form area - full width mobile, 3 cols desktop #}
            <div class="flex-1 order-1 lg:col-span-3 bg-white flex flex-col min-h-0">
                {# Pagination - desktop only (fixed above scrollable content) #}
                <div class="hidden lg:block shrink-0">
                    {% include 'booking/_pagination.html.twig' with { 'current_step': 2 } %}
                </div>
                <div id="main-content" class="flex-1 overflow-y-auto scroll-stable px-4 lg:px-8 py-8">
                    {# Flash messages - must be inside main-content for HTMX swap to display them #}
                    {% include '_partials/_flashes.html.twig' %}

                    <h2 class="pb-2">Anmelder:in</h2>
                    <p class="pb-4 text-sm leading-5">
                        Du reist nicht selbst mit. Bitte gib deine Kontaktdaten an &ndash; wir
                        verwenden sie für die Buchungsbestätigung und für Rückfragen zur Reise.
                    </p>

                    {% if form.vars.submitted and not form.vars.valid %}
                        {% include '_partials/_alert.html.twig' with {
                            level: 'error',
                            title: 'Bitte überprüfe deine Angaben',
                            messages: ['Einige Angaben fehlen noch oder sind fehlerhaft.']
                        } %}
                    {% endif %}

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {{ form_row(form.firstName) }}
                        {{ form_row(form.lastName) }}
                        {{ form_row(form.gender) }}
                        {{ form_row(form.dateOfBirth) }}
                        {{ form_row(form.nationality) }}
                    </div>

                    <div class="pt-4">
                        {{ form_row(form.address) }}
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4">
                        {{ form_row(form.email) }}
                        {{ form_row(form.mobile) }}
                    </div>
                </div>
            </div>
        </div>
        <div class="shrink-0 bg-primary-dark px-4 lg:px-8 py-2 lg:py-4 z-20">
            <div class="flex justify-between">
                <a href="{{ path('app_booking_create_step_2') }}"
                   class="button button--secondary">
                    Zurück
                </a>
                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                    Speichern
                </button>
            </div>
        </div>
        {{ form_rest(form) }}
    {{ form_end(form) }}
{% endblock %}