{% macro collectionRow(form, disposition, refreshPath) %}
    {% set inputAttr = {
        'hx-post': refreshPath,
        'hx-target': '#invoice-editor-form',
        'hx-swap': 'outerHTML',
        'hx-sync': 'closest form:replace',
        'hx-trigger': 'focusout, change',
    } %}
    <div {{ stimulus_target('form-collection', 'field') }} class="grid lg:grid-cols-12 gap-3 items-end border border-gray-200 rounded p-3">
        <div class="lg:col-span-4">
            {{ form_row(form.feeId, { attr: inputAttr }) }}
        </div>
        <div class="lg:col-span-3">
            {{ form_row(form.label, { attr: inputAttr }) }}
        </div>
        <div class="lg:col-span-2">
            {{ form_row(form.unitPriceCents, { attr: inputAttr }) }}
        </div>
        <div class="lg:col-span-2">
            {{ form_row(form.quantity, { attr: inputAttr }) }}
        </div>
        <div class="lg:col-span-1 flex justify-end pb-2">
            <button type="button" {{ stimulus_action('form-collection', 'removeItem') }}>
                {{ icon('delete', 'w-5 h-5 pointer-events-none text-red-500') }}
            </button>
        </div>
    </div>
{% endmacro %}

{% set savePath = path('app_teamer_disposition_invoice_save', { uuid: disposition.uuid }) %}
{% set submitPath = path('app_teamer_disposition_invoice_submit', { uuid: disposition.uuid }) %}
{% set refreshPath = path('app_teamer_disposition_invoice_refresh', { uuid: disposition.uuid }) %}

<div id="invoice-editor-form">
    {{ form_start(form, {
        attr: {
            'hx-post': savePath,
            'hx-target': '#invoice-editor-form',
            'hx-swap': 'outerHTML'
        }
    }) }}

    <div class="pb-4">
        <twig:MessageBox message="Bitte erfasse deine Honorarnote digital. Du kannst Zwischenschritte als Entwurf speichern." type="info"/>
    </div>

    {% if disposition.invoiceDraft and disposition.invoiceDraft.status == constant('App\\Entity\\DispositionInvoice::STATUS_REJECTED') %}
        <div class="pb-4">
            <twig:MessageBox message="Deine Honorarnote wurde abgelehnt. Bitte überarbeite sie." type="error"/>
            {% if disposition.invoiceDraft.rejectionComment %}
                <div class="pt-2 text-sm">
                    <strong>Begründung:</strong> {{ disposition.invoiceDraft.rejectionComment|nl2br }}
                </div>
            {% endif %}
        </div>
    {% endif %}

    <div {{ stimulus_controller('form-collection', { 'prototype': _self.collectionRow(form.items.vars.prototype, disposition, refreshPath)|json_encode }) }}>
        <div {{ stimulus_target('form-collection', 'fields') }} class="flex flex-col space-y-3 pb-4">
            {% do form.items.setRendered %}
            {%- for item in form.items -%}
                {{- _self.collectionRow(item, disposition, refreshPath) -}}
            {%- endfor -%}
        </div>

        <div class="flex justify-end pb-4">
            <button type="button" class="btn btn--secondary" {{ stimulus_action('form-collection', 'addItem') }}>
                Position hinzufügen
            </button>
        </div>

        {{ form_errors(form.items) }}
    </div>

    <div class="pb-4 text-right font-bold">
        Gesamt: {{ dto.totalCents|format_money }}
    </div>

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

    <div class="flex items-center space-x-2">
        <button type="submit" class="btn" formaction="{{ savePath }}">
            Entwurf speichern
        </button>
        <button type="submit" class="btn" formaction="{{ submitPath }}">
            Final einreichen
        </button>
    </div>

    {{ form_rest(form) }}
    {{ form_end(form) }}
</div>