{% extends 'htmx_modal_admin.html.twig' %}
{% form_theme form 'forms_admin.html.twig' %}

{# One line as a row of bare widgets; the column headings above name them once for all rows.
   Plain flex rather than an arbitrary grid template: the modal is loaded into a page whose
   stylesheet may predate any class used only here. #}
{% macro line_row(line) %}
    <div class="flex gap-2 items-start" data-form-collection-target="field">
        <div class="flex-1 min-w-0">
            {{ form_widget(line.label, { attr: { placeholder: 'z. B. Übernachtung' } }) }}
            {{ form_errors(line.label) }}
        </div>
        <div class="w-32 shrink-0">
            {{ form_widget(line.amount) }}
            {{ form_errors(line.amount) }}
        </div>
        <button type="button"
                class="shrink-0 mt-2 text-gray-400 hover:text-red-500"
                data-action="form-collection#removeItem"
                title="Position entfernen">
            {{ icon('close', 'w-5 h-5') }}
        </button>
    </div>
{% endmacro %}

{% block content %}
    {% import _self as period %}
    <div class="text-xl font-bold pb-1">
        {{ title }}
    </div>
    <p class="text-sm text-gray-500 pb-6">
        Die Nächte werden vom Zeitraum der Gruppe abgezogen, der neu berechnet wird. Die Positionen
        kommen zum Gesamtpreis hinzu und fallen nur unter den Rabatt auf den Gesamtpreis.
    </p>
    {{ form_start(form) }}
    {{ form_errors(form) }}
    <div class="flex gap-4 items-start">
        {{ form_row(form.label, { row_attr: { class: 'flex-1 min-w-0' } }) }}
        {{ form_row(form.nights, { row_attr: { class: 'w-32 shrink-0' } }) }}
    </div>

    {% set prototype %}{{ period.line_row(form.lines.vars.prototype) }}{% endset %}
    <div class="mt-6 border border-gray-200 rounded-md" {{ stimulus_controller('form-collection', { prototype: prototype|json_encode }) }}>
        <div class="flex gap-2 px-4 py-2 bg-gray-100 border-b border-gray-200 rounded-t-md text-sm font-bold">
            <div class="flex-1">Position</div>
            {# w-5 matches the remove button's icon, so the heading sits over the amounts. #}
            <div class="w-32 shrink-0">Betrag</div>
            <div class="w-5 shrink-0"></div>
        </div>
        <div class="p-4">
            {{ form_errors(form.lines) }}
            <div class="space-y-2" data-form-collection-target="fields">
                {% for line in form.lines %}
                    {{ period.line_row(line) }}
                {% endfor %}
            </div>
            <button type="button"
                    class="mt-3 text-sm font-medium text-primary hover:underline"
                    data-action="form-collection#addItem">
                + Position hinzufügen
            </button>
        </div>
    </div>
    {% do form.lines.setRendered %}

    <div class="flex justify-end pt-6">
        <button type="submit" class="button button--primary button--small">
            speichern
        </button>
    </div>
    {{ form_rest(form) }}
    {{ form_end(form) }}
{% endblock %}