{% 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-6 gap-x-4 gap-y-4">
        <div class="lg:col-span-3">
            {{ form_row(form.destination) }}
        </div>
        {{ form_row(form.availableDispositions) }}
        <div>
            <h4 class="font-bold pb-2">
                {{ form_label(form.showAvailableDispositions) }}
            </h4>
            {{ form_widget(form.showAvailableDispositions) }}
        </div>
    </div>
    <div class="grid lg:grid-cols-2 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.jobProfile) }}
        {{ form_row(form.contact) }}
    </div>
    <div class="grid lg:grid-cols-2 gap-x-8 gap-y-4">
        {{ form_row(form.pickup) }}
        {{ form_row(form.pickupDate) }}
    </div>
    <div class="grid lg:grid-cols-2 gap-x-8 gap-y-4">
        {{ form_row(form.benefits) }}
        {{ form_row(form.fees) }}
    </div>
    <div class="grid lg:grid-cols-2 gap-x-8 gap-y-4">
        {{ form_row(form.remarks) }}
        <div {{ stimulus_controller('form-collection', { 'prototype': _self.collectionRow(form.documents.vars.prototype)|json_encode }) }}>
            <h4 class="font-bold pb-2">
                Dokumente
            </h4>
            <div {{ stimulus_target('form-collection', 'fields')}} class="flex flex-col space-y-4 mb-4">
                {% do form.documents.setRendered %}
                {%- for document in form.documents -%}{{- _self.collectionRow(document) -}}{%- endfor -%}
            </div>
            <div class="flex justify-end">
                <button type="button"
                        {{ stimulus_action('form-collection', 'addItem') }}
                        title="Dokument 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_admin_assignment_index') }}" class="btn btn--secondary">
        Abbrechen
    </a>
</div>
{{ form_rest(form) }}
{{ form_end(form) }}