{% macro collectionRow(form) %}
    <div {{ stimulus_target('form-collection', 'field') }}>
        <div class="flex items-center space-x-4">
            {{ form_widget(form) }}
            <button type="button" {{ stimulus_action('form-collection', 'removeItem') }}>
                {{ icon('delete', 'w-4 h-4 mt-2 pointer-events-none') }}
            </button>
        </div>
        {{ form_errors(form) }}
    </div>
{% endmacro %}

{{ form_start(form) }}
<div class="flex flex-col space-y-4 pb-8">
    <div class="grid lg:grid-cols-2 gap-x-8 gap-y-4">
        {{ form_row(form.product) }}
        {{ form_row(form.hotelBusProId) }}
    </div>
    <div class="grid lg:grid-cols-3 gap-x-8 gap-y-4">
        {{ form_row(form.dateFrom) }}
        {{ form_row(form.dateTo) }}
    </div>
    <div class="grid lg:grid-cols-2 gap-x-8 gap-y-4">
        {{ form_row(form.country) }}
        <div {{ stimulus_controller('form-collection', { 'prototype': _self.collectionRow(form.pickups.vars.prototype)|json_encode }) }}>
            <h4 class="font-bold pb-2">
                Buszustiege
            </h4>
            <div {{ stimulus_target('form-collection', 'fields')}} class="flex flex-col space-y-4 mb-4">
                {% do form.pickups.setRendered %}
                {%- for pickup in form.pickups -%}{{- _self.collectionRow(pickup) -}}{%- endfor -%}
            </div>
            <div class="flex justify-end">
                <button type="button"
                        {{ stimulus_action('form-collection', 'addItem') }}
                        title="Zustieg hinzufügen">
                    {{ icon('plus', 'w-4 h-4 pointer-events-none') }}
                </button>
            </div>
        </div>
    </div>
</div>
<div class="flex items-center space-x-2">
    <button type="submit" class="btn">
        Speichern
    </button>
    <a href="{{ path('app_administrative_system_destination_index') }}" class="btn btn--secondary">
        Abbrechen
    </a>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}