{% 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' %}
                    {% include 'booking/_participant_form.html.twig' with {
                        'bookingCreateContext': bookingCreateContext,
                        'bookingDto': bookingCreateContext.bookingDto,
                        'summaryData': bookingCreateContext.summaryData
                    } %}
                </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 %}