{% trans_default_domain 'admin' %}

{# Shared by the offer- and edition-level consent sections. Everything
   subject-specific (preview strip, footer route/params, lock state) comes from
   the component via this.* so the same template serves both. #}
{% set locked = this.isLocked() %}

{# Backend signing types (value → label/description). Labels reuse the existing
   consentForm.compulsory.* keys; descriptions are agreementLetter.type.*. #}
{% set typeDefs = [
    { value: 'compulsory',     label: 'consentForm.compulsory.compulsory'|trans,     desc: 'offers.agreementLetter.type.compulsory'|trans },
    { value: 'opt-in',         label: 'consentForm.compulsory.opt-in'|trans,         desc: 'offers.agreementLetter.type.optin'|trans },
    { value: 'opt-out',        label: 'consentForm.compulsory.opt-out'|trans,        desc: 'offers.agreementLetter.type.optout'|trans },
    { value: 'force_decision', label: 'consentForm.compulsory.force_decision'|trans, desc: 'offers.agreementLetter.type.force'|trans },
] %}

{% set strip = this.previewStrip() %}
{% set accountStates = this.previewStates('account') %}
{% set participantStates = this.previewStates('participant') %}
{# Once people have signed, the whole section is frozen behind the lockbar:
   editing is disabled until the user explicitly unlocks (a changed text would
   invalidate the signatures and force a re-consent). #}
{% set signees = this.signees() %}
{% set frozen = this.isFrozen() %}
{% set editLocked = locked or frozen %}

<div {{ attributes.defaults({ class: 'border-t border-gray-200 dark:border-gray-800 mt-6 pt-6' }) }}>

    <div class="grid grid-cols-1 items-start gap-8 xl:grid-cols-[minmax(0,1fr)_390px]">

        {# ─────────── editor ─────────── #}
        <div>
            {# ── lockbar — shown as soon as anyone signed ── #}
            {% if not locked and signees > 0 %}
                {% set consents_link = path('admin_consents_index', { filter: { consentForm: this.consentFormFilterValue() } }) %}
                <div class="mb-4 flex items-start gap-3 rounded-xl border px-4 py-3.5 {{ frozen
                    ? 'border-amber-200 bg-amber-50 dark:border-amber-500/30 dark:bg-amber-500/10'
                    : 'border-emerald-200 bg-emerald-50 dark:border-emerald-500/30 dark:bg-emerald-500/10' }}">
                    <span class="grid size-9 flex-none place-items-center rounded-lg {{ frozen
                        ? 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300'
                        : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300' }}">
                        <twig:ux:icon name="{{ frozen ? 'ph:lock-simple' : 'ph:lock-simple-open' }}" class="size-4" />
                    </span>
                    <span class="min-w-0 flex-1 text-xs leading-5 {{ frozen ? 'text-amber-800 dark:text-amber-200/90' : 'text-emerald-900 dark:text-emerald-200/90' }}">
                        <b class="block text-[13px] font-bold {{ frozen ? 'text-amber-900 dark:text-amber-200' : 'text-emerald-950 dark:text-emerald-200' }}">
                            {{ (frozen ? 'offers.agreementLetter.lock.lockedTitle' : 'offers.agreementLetter.lock.unlockedTitle')|trans }}
                        </b>
                        <a href="{{ consents_link }}" class="font-semibold text-primary-600 underline underline-offset-2 hover:no-underline dark:text-primary-400">{{ 'offers.agreementLetter.lock.signees'|trans({count: signees}) }}</a>
                        {{ (frozen ? 'offers.agreementLetter.lock.lockedText' : 'offers.agreementLetter.lock.unlockedText')|trans({count: signees}) }}
                    </span>
                    {# Re-locking swaps the Lexical editors back to read-only views;
                       the morph never removes data-live-ignore'd nodes on its own,
                       so the onclick drops them before the action runs. #}
                    <button type="button"
                            data-action="live#action"
                            data-live-action-param="toggleLock"
                            {% if not frozen %}onclick="this.closest('[data-controller~=live]')?.querySelectorAll('[id^=c-text-]').forEach((el) => el.remove())"{% endif %}
                            class="inline-flex flex-none items-center gap-1.5 rounded-lg border bg-white px-3 py-2 text-xs font-semibold transition dark:bg-gray-900 {{ frozen
                                ? 'border-amber-300 text-amber-800 hover:bg-amber-100/60 dark:border-amber-500/40 dark:text-amber-200 dark:hover:bg-amber-500/15'
                                : 'border-emerald-300 text-emerald-800 hover:bg-emerald-100/60 dark:border-emerald-500/40 dark:text-emerald-200 dark:hover:bg-emerald-500/15' }}">
                        <twig:ux:icon name="{{ frozen ? 'ph:lock-simple-open' : 'ph:lock-simple' }}" class="size-3.5" />
                        {{ (frozen ? 'offers.agreementLetter.lock.unlock' : 'offers.agreementLetter.lock.relock')|trans }}
                    </button>
                </div>
            {% endif %}

            {# ── editor body — inert while the lock is closed ── #}
            <div {% if frozen %}class="pointer-events-none select-none opacity-60" aria-disabled="true"{% endif %}>
            {% if consents is empty %}
                <div class="rounded-xl border border-dashed border-gray-300 px-6 py-10 text-center dark:border-gray-700">
                    <twig:ux:icon name="ph:shield-check" class="mx-auto size-7 text-gray-300 dark:text-gray-600" />
                    <p class="mt-2 text-sm font-semibold text-gray-700 dark:text-gray-200">{{ 'offers.agreementLetter.empty.title'|trans }}</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">{{ 'offers.agreementLetter.empty.text'|trans }}</p>
                </div>
            {% else %}
                <div class="flex flex-col gap-4">
                    {% for id, c in consents %}
                        <div class="rounded-xl border border-gray-200 bg-white transition focus-within:border-primary-400 focus-within:ring-2 focus-within:ring-primary-500/15 dark:border-gray-700 dark:bg-gray-800/60">
                            <div class="flex items-center gap-2.5 border-b border-gray-100 px-3 py-2.5 dark:border-gray-700/60">
                                <span class="grid size-5 flex-none place-items-center rounded-md bg-gray-100 text-[11px] font-bold text-gray-500 dark:bg-gray-700 dark:text-gray-300">{{ loop.index }}</span>
                                <span class="min-w-0 flex-1 truncate text-sm font-semibold text-gray-800 dark:text-gray-100">{{ c.title|trim ?: 'offers.agreementLetter.untitled'|trans }}</span>
                                <span class="flex-none rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-gray-600 dark:bg-gray-700 dark:text-gray-300">{{ ('consentForm.subject.' ~ c.subject)|trans }}</span>
                                {% if not editLocked %}
                                    <button type="button"
                                            class="grid flex-none place-items-center rounded-md p-1.5 text-gray-400 transition hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-500/10"
                                            title="{{ 'offers.agreementLetter.removeConsent'|trans }}"
                                            data-action="live#action"
                                            data-live-action-param="removeConsent"
                                            data-live-id-param="{{ id }}">
                                        <twig:ux:icon name="ph:trash" class="size-4" />
                                    </button>
                                {% endif %}
                            </div>

                            <div class="flex flex-col gap-4 px-3.5 py-3.5">
                                {# title #}
                                <div>
                                    <label class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-200" for="c-title-{{ c.id }}">{{ 'consentForm.title'|trans }}</label>
                                    <input id="c-title-{{ c.id }}" type="text"
                                           {{ editLocked ? 'disabled' : '' }}
                                           data-model="debounce(200)|consents.{{ id }}.title"
                                           value="{{ c.title }}"
                                           placeholder="{{ 'offers.agreementLetter.titlePlaceholder'|trans }}"
                                           class="block w-full rounded-lg border-0 px-3 py-2 text-sm text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 transition placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-500 disabled:cursor-not-allowed disabled:bg-gray-50 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-600">
                                    <p class="mt-1.5 text-[11px] leading-5 text-gray-500 dark:text-gray-400">{{ 'consentForm.titleHelp'|trans }}</p>
                                </div>

                                {# consent text — Lexical markdown editor (Bold/Italic only).
                                   While the section is locked the text renders read-only;
                                   the live editor is protected from morphs with
                                   data-live-ignore and bound to the stable
                                   consents.<uuid>.text path via a hidden textarea. #}
                                <div>
                                    <label class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-200" for="c-text-{{ c.id }}">{{ 'consentForm.text'|trans }}</label>

                                    {% if editLocked %}
                                        <div class="prose prose-sm dark:prose-invert max-w-none rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">
                                            {{ c.text|markdown_to_html }}
                                        </div>
                                    {% else %}
                                        <div id="c-text-{{ c.id }}" data-controller="ferienpass--admin-lexical" data-live-ignore>
                                            <div class="flex items-center justify-end gap-2 rounded-t-lg border border-b-0 border-gray-300 bg-gray-50 px-2 py-1 dark:border-gray-700 dark:bg-gray-800" data-ferienpass--admin-lexical-target="toolbar">
                                                <button type="button" title="{{ 'consentForm.text.bold'|trans }}"
                                                        class="inline-flex size-6 items-center justify-center rounded text-gray-400 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200"
                                                        data-action="click->ferienpass--admin-lexical#dispatchAction"
                                                        data-ferienpass--admin-lexical-action-param="bold">
                                                    <span class="sr-only">{{ 'consentForm.text.bold'|trans }}</span>
                                                    {{ ux_icon('ph:text-b', { class: 'size-4' }) }}
                                                </button>
                                                <button type="button" title="{{ 'consentForm.text.italic'|trans }}"
                                                        class="inline-flex size-6 items-center justify-center rounded text-gray-400 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-gray-200"
                                                        data-action="click->ferienpass--admin-lexical#dispatchAction"
                                                        data-ferienpass--admin-lexical-action-param="italic">
                                                    <span class="sr-only">{{ 'consentForm.text.italic'|trans }}</span>
                                                    {{ ux_icon('ph:text-italic', { class: 'size-4' }) }}
                                                </button>
                                            </div>
                                            <div data-ferienpass--admin-lexical-target="editor" contenteditable="true"
                                                 class="lexical-editor prose prose-sm dark:prose-invert max-w-none min-h-[96px] rounded-b-lg border border-gray-300 bg-white px-3 py-2 text-sm leading-6 text-gray-900 outline-none focus:border-primary-500 focus:ring-1 focus:ring-inset focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100"></div>
                                            <textarea data-model="consents.{{ id }}.text" data-ferienpass--admin-lexical-target="input" class="hidden">{{ c.text }}</textarea>
                                        </div>
                                    {% endif %}

                                    {% if not editLocked %}
                                        <p class="mt-1.5 text-[11px] leading-5 text-gray-500 dark:text-gray-400">{{ 'consentForm.textHelp'|trans }}</p>
                                    {% endif %}
                                </div>

                                {# subject / scope #}
                                <div>
                                    <label class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-200">{{ 'consentForm.subject'|trans }}</label>
                                    <div class="inline-flex rounded-lg bg-gray-100 p-1 dark:bg-gray-700">
                                        {% for sv in ['account', 'participant'] %}
                                            {% set on = c.subject == sv %}
                                            <button type="button"
                                                    {{ editLocked ? 'disabled' : '' }}
                                                    data-action="live#action"
                                                    data-live-action-param="setSubject"
                                                    data-live-id-param="{{ id }}"
                                                    data-live-value-param="{{ sv }}"
                                                    aria-pressed="{{ on ? 'true' : 'false' }}"
                                                    class="inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-semibold transition disabled:cursor-not-allowed
                                                           {{ on ? 'bg-white text-gray-900 shadow-sm dark:bg-gray-900 dark:text-gray-100' : 'text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200' }}">
                                                <twig:ux:icon name="{{ sv == 'account' ? 'ph:user-circle' : 'ph:user' }}" class="size-3.5" />
                                                {{ ('consentForm.subject.' ~ sv)|trans }}
                                            </button>
                                        {% endfor %}
                                    </div>
                                    <p class="mt-1.5 text-[11px] leading-5 text-gray-500 dark:text-gray-400">{{ 'consentForm.subjectHelp'|trans }}</p>
                                </div>

                                {# compulsory / signing type #}
                                <div>
                                    <label class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-200">{{ 'offers.agreementLetter.typeLabel'|trans }}</label>
                                    <div class="flex flex-col gap-0.5">
                                        {% for def in typeDefs %}
                                            {% set on = c.compulsory == def.value %}
                                            <button type="button"
                                                    {{ editLocked ? 'disabled' : '' }}
                                                    data-action="live#action"
                                                    data-live-action-param="setCompulsory"
                                                    data-live-id-param="{{ id }}"
                                                    data-live-value-param="{{ def.value }}"
                                                    aria-pressed="{{ on ? 'true' : 'false' }}"
                                                    class="flex items-start gap-2.5 rounded-lg px-2 py-2 text-left transition disabled:cursor-not-allowed {{ on ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-800/60' }}">
                                                <span class="mt-0.5 grid size-[18px] flex-none place-items-center rounded-full border-2 transition {{ on ? 'border-primary-500' : 'border-gray-300 dark:border-gray-600' }}">
                                                    <span class="size-2 rounded-full bg-primary-500 transition {{ on ? 'scale-100' : 'scale-0' }}"></span>
                                                </span>
                                                <span class="min-w-0">
                                                    <span class="block text-[13px] {{ on ? 'font-semibold text-gray-900 dark:text-gray-100' : 'font-medium text-gray-700 dark:text-gray-300' }}">{{ def.label }}</span>
                                                    {% if on %}<span class="mt-0.5 block text-[11.5px] leading-snug text-gray-500 dark:text-gray-400">{{ def.desc }}</span>{% endif %}
                                                </span>
                                            </button>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}

            {% if not locked %}
                <button type="button"
                        data-action="live#action"
                        data-live-action-param="addConsent"
                        class="mt-4 flex w-full items-center justify-center gap-2 rounded-lg border border-dashed border-gray-300 px-4 py-2.5 text-sm font-semibold text-gray-700 transition hover:border-primary-400 hover:bg-primary-50 hover:text-primary-700 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-primary-500/10">
                    <twig:ux:icon name="ph:plus" class="size-4" />
                    {{ 'offers.agreementLetter.addConsent'|trans }}
                </button>
            {% endif %}
            </div>
        </div>

        {# ─────────── live preview (reuses the frontend consent partial) ─────────── #}
        <div class="xl:sticky xl:top-4">
            <div class="mb-2.5 flex items-center justify-between gap-2">
                <span class="inline-flex items-center gap-2 text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                    <span class="relative flex size-2">
                        <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-60"></span>
                        <span class="relative inline-flex size-2 rounded-full bg-green-600"></span>
                    </span>
                    {{ 'offers.agreementLetter.preview.label'|trans }}
                </span>
                <span class="text-[11px] text-gray-400 dark:text-gray-500">{{ 'offers.agreementLetter.preview.hint'|trans }}</span>
            </div>

            <div class="overflow-hidden rounded-[20px] border border-gray-200 bg-white shadow-lg dark:border-gray-700">
                <div class="flex h-8 items-center gap-1.5 border-b border-gray-100 bg-gray-50 px-3.5 dark:border-gray-700 dark:bg-gray-800">
                    <span class="size-2 rounded-full bg-gray-200 dark:bg-gray-600"></span>
                    <span class="size-2 rounded-full bg-gray-200 dark:bg-gray-600"></span>
                    <span class="size-2 rounded-full bg-gray-200 dark:bg-gray-600"></span>
                </div>

                <div class="max-h-[70vh] overflow-y-auto">
                    <div class="bg-[#fbf7f1] px-4 pb-5 pt-4 text-[#2b2620]">
                        <div class="flex items-center gap-3 rounded-xl border border-[#ece6dd] bg-white p-3">
                            <span class="size-10 flex-none rounded-lg bg-[#f3eee5]"></span>
                            <span class="min-w-0">
                                <b class="block truncate text-[13.5px] font-semibold tracking-tight">{{ strip.title ?: 'offers.agreementLetter.preview.offerFallback'|trans }}</b>
                                <span class="text-[11.5px] text-[#7a746d]">
                                    {%- if strip.date %}{{ strip.date|date('d.m.Y') }}{% if strip.date|date('H:i') != '00:00' %} · {{ strip.date|date('H:i') }}{% endif %}{% endif -%}
                                    {%- if strip.minAge or strip.maxAge %}{{ strip.date ? ' · ' }}{{ strip.minAge ?: '' }}–{{ strip.maxAge ?: '' }} {{ 'offers.agreementLetter.preview.years'|trans }}{% endif -%}
                                </span>
                            </span>
                        </div>

                        {# account-scope consents render on the gateway, before participant selection #}
                        {% if accountStates is not empty %}
                            <h3 class="mt-4 mb-1 text-[19px] font-semibold tracking-tight text-[#2a1a10]">{{ 'offers.agreementLetter.preview.accountHeading'|trans }}</h3>
                            <div class="mb-1 inline-flex items-center gap-1.5 rounded-md border border-[#f0dcb4] bg-[#fbf1df] px-2.5 py-1 text-[10.5px] font-semibold text-[#9a7b46]">
                                <twig:ux:icon name="ph:user-circle" class="size-3.5" />
                                {{ 'offers.agreementLetter.preview.accountKicker'|trans }}
                            </div>
                            {% include '@Contao/components/application_form/_consents.html.twig' with { states: accountStates, scope: 'account', participantDecisions: {} } only %}
                        {% endif %}

                        <h3 class="mt-4 mb-2 text-[19px] font-semibold tracking-tight text-[#2a1a10]">{{ 'offers.agreementLetter.preview.heading'|trans }}</h3>
                        <div class="flex items-center gap-3 rounded-xl border-[1.5px] border-[#d9582b] bg-[#fbf1ea] p-3">
                            <span class="grid size-[34px] flex-none place-items-center rounded-lg bg-[#d9582b] text-[12px] font-bold text-white">MM</span>
                            <span>
                                <b class="block text-[13.5px] font-semibold">{{ 'offers.agreementLetter.preview.childName'|trans }}</b>
                                <span class="text-[11.5px] text-[#7a746d]">{{ 'offers.agreementLetter.preview.childAge'|trans }}</span>
                            </span>
                            <span class="ml-auto grid size-[18px] place-items-center rounded-full border-2 border-[#d9582b]">
                                <span class="size-2 rounded-full bg-[#d9582b]"></span>
                            </span>
                        </div>

                        {# participant-scope consents render inside the form, attributed
                           to the selected child — mirrors the "Anmeldung für …" divider
                           the frontend application form prints per participant #}
                        {% if participantStates is not empty %}
                            <div class="mb-2 mt-4 flex items-center gap-3" aria-hidden="true">
                                <span class="h-px flex-1 bg-[#ece6dd]"></span>
                                <span class="text-[10.5px] font-bold uppercase tracking-widest text-[#9a7b46]">
                                    {{ 'offers.agreementLetter.preview.participantFor'|trans({name: 'offers.agreementLetter.preview.childName'|trans}) }}
                                </span>
                                <span class="h-px flex-1 bg-[#ece6dd]"></span>
                            </div>
                            {% include '@Contao/components/application_form/_consents.html.twig' with { states: participantStates, scope: 'p-preview', participantDecisions: {} } only %}
                        {% endif %}

                        {% if accountStates is empty and participantStates is empty %}
                            <p class="mt-4 text-[12px] italic text-[#a39d93]">{{ 'offers.agreementLetter.preview.empty'|trans }}</p>
                        {% endif %}

                        <div class="mt-4 rounded-xl bg-[#2f6f57] py-2.5 text-center text-[13.5px] font-semibold text-white opacity-90">{{ 'offers.agreementLetter.preview.submit'|trans }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% if message|default %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Daten gespeichert" :message="message" />
        </twig:Turbo:Stream:Prepend>
    {% endif %}

    <twig:Admin:Edit:Footer :isDirty="true" :isReadonly="locked or frozen" :sections="sections" :section="section" :params="this.footerParams()" :editRoute="this.footerEditRoute()" :viewRoute="this.footerViewRoute()" :useLiveAction="true" />
</div>
