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

{% block content %}
    {{ form_start(form, {
        'attr': {
            'class': 'flex-1 flex flex-col min-h-0',
            'novalidate': 'novalidate'
        }
    }) }}
        <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': bookingEditContext.bookingDto,
                    'summaryData': bookingEditContext.summaryData,
                    'mutableData': bookingEditContext.mutableData|default(null)
                } %}
            </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">
                {# Header - desktop only #}
                <div class="hidden lg:flex shrink-0 px-4 lg:px-8 h-16 items-center shadow-md relative z-10 bg-white">
                    <h1 class="text-xl font-semibold uppercase">Buchung bearbeiten</h1>
                </div>
                <div id="main-content" class="flex-1 overflow-y-auto 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 {
                        'bookingEditContext': bookingEditContext,
                        'participantIndex': participantIndex,
                        'refreshRouteName': refreshRouteName,
                        'refreshRouteParams': refreshRouteParams|default({}),
                        'cancelRouteName': cancelRouteName|default('app_booking_edit'),
                        'cancelRouteParams': cancelRouteParams|default({id: bookingEditContext.bookingData.id})
                    } %}
                </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_edit', {id: bookingEditContext.bookingData.id}) }}"
                   class="inline-flex items-center justify-center bg-gray-200 rounded-md w-8 h-8 md:w-10 md:h-10"
                   {{ qa_attribute('btn-cancel') }}>
                    <svg class="w-6 h-6 md:w-8 md:h-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="200" y1="200" x2="56" y2="56" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                </a>
                <button type="submit" class="button button--primary" {{ qa_attribute('btn-submit') }}>
                    Speichern
                </button>
            </div>
        </div>
        {{ form_rest(form) }}
    {{ form_end(form) }}
{% endblock %}