{# Account-consent gate — shown before participant selection whenever
   account-level consents are outstanding. Consents are read & signed INLINE
   (full text always visible, scrolls in place), no modal round-trip. Unlike
   the per-participant decisions, signing here persists IMMEDIATELY (it is a
   legally meaningful signature), hence the live actions.

   Required context: accountConsentStates #}

{% if not app.user %}
    {# Pass the offer's canonical reader URL so a passkey/login lands back on
       this offer page, not the bare list (the ESI Referer drops the auto_item). #}
    {% include '@Contao/fragment/_sign_in.html.twig' with { layout: 'form-only', seamless: true, show_tabs: false, redirect: path('cms', { to: 'offer_list', edition: offer.edition, auto_item: offer_auto_item(offer) }) } %}
{% else %}

    <div class="space-y-8">

        {# ── intro ── #}
        <div class="mx-auto max-w-md text-center">
            <div class="mx-auto mb-4 grid size-14 place-items-center rounded-lg bg-primary-50 text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">
                <twig:ux:icon name="lucide:shield-check" class="size-7" />
            </div>
            <p class="mb-2 text-[11px] font-bold uppercase tracking-widest text-primary-700 dark:text-primary-300">
                {{ 'applicationForm.gate.kicker'|trans({}, 'cms') }}
            </p>
            <h3 class="text-2xl font-semibold tracking-tight text-gray-900 dark:text-gray-50">
                {{ 'applicationForm.gate.title'|trans({}, 'cms') }}
            </h3>
            <p class="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-300">
                {{ 'applicationForm.gate.intro'|trans({}, 'cms') }}
            </p>
        </div>

        {# ── flat consent list, dashed separators ── #}
        <div>
            {% for state in accountConsentStates %}
                {% set form = state.consentForm %}
                {% set pt = state.participant %}
                <div class="border-t border-dashed border-gray-200 py-5 first:border-t-0 first:pt-0 last:pb-0 dark:border-gray-700" id="{{ state.targetId }}">
                    <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                        {{ state.title|default('consents.label'|trans({}, 'cms'))|machine_translate }}
                    </p>
                    {# edition-scoped participant consents appear here once per child #}
                    {% if pt %}
                        <p class="mt-0.5 inline-flex items-center gap-1.5 text-sm font-medium text-gray-700 dark:text-gray-200">
                            <twig:ux:icon name="lucide:user-round" class="size-4" />
                            {{ 'applicationForm.gate.forParticipant'|trans({name: pt.firstname}, 'cms') }}
                        </p>
                    {% endif %}

                    {# full consent text — ALWAYS visible, scrolls in place #}
                    {% if form.text %}
                        <div class="prose prose-sm dark:prose-invert mt-1.5 max-h-48 max-w-none overflow-y-auto overscroll-contain pr-3 text-[13px] leading-relaxed text-gray-600 dark:text-gray-400">
                            {{ form.text|markdown_to_html|machine_translate }}
                        </div>
                    {% endif %}

                    <div class="mt-3 flex flex-wrap items-center justify-between gap-3">
                        {% if state.signed %}
                            <span class="inline-flex items-center gap-1.5 text-sm font-semibold text-[#245a46] dark:text-[#9cc4ae]">
                                <twig:ux:icon name="lucide:check" class="size-4" />
                                {{ 'applicationForm.gate.signedAt'|trans({date: state.signature.signedAt|date('d.m.Y H:i')}, 'cms') }}
                            </span>
                        {% elseif state.compulsory == 'compulsory' %}
                            <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-amber-600 dark:text-amber-400">
                                <twig:ux:icon name="lucide:shield-alert" class="size-4" />
                                {{ 'applicationForm.consent.required'|trans({}, 'cms') }}
                            </span>
                            <button type="button"
                                    data-action="live#action"
                                    data-live-action-param="decideAccountConsent"
                                    data-live-form-param="{{ form.id }}"
                                    data-live-decision-param="1"
                                    {% if pt %}data-live-participant-param="{{ pt.id }}"{% endif %}
                                    class="inline-flex items-center gap-2.5 rounded-lg border border-gray-300 py-2 pl-2.5 pr-3.5 text-sm font-semibold text-gray-700 transition hover:border-gray-400 dark:border-gray-600 dark:text-gray-200 dark:hover:border-gray-500">
                                <span class="grid size-5 flex-none place-items-center rounded border-2 border-gray-300 dark:border-gray-500"></span>
                                {{ 'applicationForm.gate.acknowledge'|trans({}, 'cms') }}
                            </button>
                        {% else %}
                            {# opt-in / opt-out / force-decision at account level —
                               an explicit yes/no, persisted immediately #}
                            {% set decision = state.acknowledged ? (state.agreed ? '1' : '0') : null %}
                            {% if decision is null %}
                                <span class="inline-flex items-center gap-1.5 text-xs font-semibold text-amber-600 dark:text-amber-400">
                                    <twig:ux:icon name="lucide:shield-alert" class="size-4" />
                                    {{ 'applicationForm.pleaseDecide'|trans({}, 'cms') }}
                                </span>
                            {% else %}
                                <span></span>
                            {% endif %}
                            {% set seg_off = 'text-gray-500 hover:bg-white/60 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800/60 dark:hover:text-gray-100' %}
                            {% set seg_yes = 'bg-white text-[#245a46] shadow-sm dark:bg-gray-800 dark:text-[#9cc4ae]' %}
                            {% set seg_no = 'bg-white text-red-600 shadow-sm dark:bg-gray-800 dark:text-red-400' %}
                            <span class="inline-grid grid-cols-2 gap-1.5 rounded-lg bg-gray-100 p-1 dark:bg-gray-700">
                                <button type="button"
                                        data-action="live#action"
                                        data-live-action-param="decideAccountConsent"
                                        data-live-form-param="{{ form.id }}"
                                        data-live-decision-param="1"
                                        {% if pt %}data-live-participant-param="{{ pt.id }}"{% endif %}
                                        class="flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition {{ decision == '1' ? seg_yes : seg_off }}">
                                    {% if decision == '1' %}<twig:ux:icon name="lucide:check" class="size-3.5" />{% endif %}
                                    {{ 'applicationForm.agree'|trans({}, 'cms') }}
                                </button>
                                <button type="button"
                                        data-action="live#action"
                                        data-live-action-param="decideAccountConsent"
                                        data-live-form-param="{{ form.id }}"
                                        data-live-decision-param="0"
                                        {% if pt %}data-live-participant-param="{{ pt.id }}"{% endif %}
                                        class="flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition {{ decision == '0' ? seg_no : seg_off }}">
                                    {% if decision == '0' %}<twig:ux:icon name="lucide:x" class="size-3.5" />{% endif %}
                                    {{ 'applicationForm.revoke'|trans({}, 'cms') }}
                                </button>
                            </span>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>

        {# ── manage hint: consents are reviewable & revocable in the account ── #}
        <p class="text-xs leading-5 text-gray-500 dark:text-gray-400">
            {{ 'applicationForm.gate.manageHint'|trans({
                link_start: '<a href="' ~ path('cms', { to: 'user_account', alias: 'einwilligungen' }) ~ '" class="font-medium text-primary-700 underline hover:no-underline dark:text-primary-300">',
                link_end: '</a>',
            }, 'cms')|raw }}
        </p>

        {# ── footer: blocker status + Weiter ── #}
        {% set openCount = accountConsentStates|filter(s => s.isOutstanding)|length %}
        <div class="flex items-center justify-end gap-4 border-t border-gray-200 pt-5 dark:border-gray-700">
            {% if openCount > 0 %}
                <span class="inline-flex items-center gap-1.5 text-xs font-medium text-amber-600 dark:text-amber-400">
                    <twig:ux:icon name="lucide:info" class="size-4" />
                    {{ 'applicationForm.gate.open'|trans({count: openCount}, 'cms') }}
                </span>
            {% else %}
                <span class="inline-flex items-center gap-1.5 text-xs font-medium text-[#245a46] dark:text-[#9cc4ae]">
                    <twig:ux:icon name="lucide:check" class="size-4" />
                    {{ 'applicationForm.gate.complete'|trans({}, 'cms') }}
                </span>
            {% endif %}
            <twig:Cms:Button variant="primary"
                             id="application-form-consents-continue-button"
                             data-action="live#action"
                             data-live-action-param="confirmConsents"
                             :disabled="openCount > 0"
                             class="gap-1.5">
                {{ 'applicationForm.continue'|trans({}, 'cms') }}
                <twig:ux:icon name="lucide:chevron-right" class="size-4" />
            </twig:Cms:Button>
        </div>

    </div>
{% endif %}
