{% trans_default_domain 'admin' %}

{# Edition-level "Einverständnis der Veranstaltenden": a single season-wide
   confidentiality declaration hosts sign once before they can open the
   participant lists of their offers. The working copy (enabled/title/text) lives
   in LiveProps so the preview reacts live; only save writes it to the edition.
   Once signed, the section freezes behind the lockbar.

   Styling follows the sibling Offer/AgreementLetter editor and the app's native
   primitives (form-theme labels/inputs, the Lexical markdown editor, and
   <twig:Admin:Alert>) — no bespoke cards, radii or shadows. #}
{% set signees = this.signees() %}
{% set frozen = this.isFrozen() %}

<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 (mirrors AgreementLetter) ── #}
            {% if signees > 0 %}
                <div class="mb-4 flex items-start gap-3 rounded-lg 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-sm leading-5 {{ frozen ? 'text-amber-800 dark:text-amber-200/90' : 'text-emerald-900 dark:text-emerald-200/90' }}">
                        <b class="block font-bold {{ frozen ? 'text-amber-900 dark:text-amber-200' : 'text-emerald-950 dark:text-emerald-200' }}">
                            {{ (frozen ? 'hostConsent.lock.lockedTitle' : 'hostConsent.lock.unlockedTitle')|trans }}
                        </b>
                        <a href="{{ this.signaturesLink() }}" class="font-semibold text-primary-600 underline underline-offset-2 hover:no-underline dark:text-primary-400">{{ 'hostConsent.lock.signees'|trans({count: signees}) }}</a>
                        {{ (frozen ? 'hostConsent.lock.lockedText' : 'hostConsent.lock.unlockedText')|trans({count: signees}) }}
                    </span>
                    {# Re-locking swaps the Lexical editor back to a read-only view; the
                       morph never removes data-live-ignore'd nodes on its own, so drop
                       it 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^=hc-text]').forEach((el) => el.remove())"{% endif %}
                            class="inline-flex flex-none items-center gap-1.5 rounded-md 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 ? 'hostConsent.lock.unlock' : 'hostConsent.lock.relock')|trans }}
                    </button>
                </div>
            {% endif %}

            {# ── enable toggle ── #}
            <div class="flex items-start gap-3.5 rounded-lg border p-4 transition {{ enabled
                ? 'border-emerald-200 bg-emerald-50 dark:border-emerald-500/30 dark:bg-emerald-500/10'
                : 'border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/60' }}">
                <span class="grid size-9 flex-none place-items-center rounded-lg border bg-white transition dark:bg-gray-900 {{ enabled
                    ? 'border-emerald-200 text-emerald-600 dark:border-emerald-500/30 dark:text-emerald-400'
                    : 'border-gray-200 text-gray-400 dark:border-gray-700 dark:text-gray-500' }}">
                    <twig:ux:icon name="ph:shield-check" class="size-5" />
                </span>
                <div class="min-w-0 flex-1">
                    <b class="block text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'hostConsent.enable.title'|trans }}</b>
                    <span class="mt-0.5 block text-sm leading-5 text-gray-600 dark:text-gray-400">{{ 'hostConsent.enable.text'|trans }}</span>
                </div>
                <button type="button" role="switch" aria-checked="{{ enabled ? 'true' : 'false' }}"
                        aria-label="{{ 'hostConsent.enable.title'|trans }}"
                        {{ frozen ? 'disabled' : '' }}
                        data-action="live#action"
                        data-live-action-param="toggleEnabled"
                        class="relative mt-0.5 inline-flex h-6 w-11 flex-none items-center rounded-full transition disabled:cursor-not-allowed disabled:opacity-60 {{ enabled ? 'bg-emerald-600' : 'bg-gray-300 dark:bg-gray-600' }}">
                    <span class="inline-block size-5 transform rounded-full bg-white shadow-sm transition {{ enabled ? 'translate-x-[22px]' : 'translate-x-0.5' }}"></span>
                </button>
            </div>

            {% if enabled %}
                <div class="mt-5 {% if frozen %}pointer-events-none select-none opacity-60{% endif %}" {% if frozen %}aria-disabled="true"{% endif %}>

                    {# ── import dropdown ── #}
                    {% set prior = this.previousEditions() %}
                    {% if prior is not empty %}
                        <div class="mb-4 flex justify-end">
                            <details class="group relative">
                                <summary class="flex cursor-pointer list-none items-center gap-2 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50 [&::-webkit-details-marker]:hidden dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800">
                                    <twig:ux:icon name="ph:download-simple" class="size-4" />
                                    {{ 'hostConsent.import.button'|trans }}
                                    <twig:ux:icon name="ph:caret-down" class="size-3.5 text-gray-400 transition group-open:rotate-180" />
                                </summary>
                                <div class="absolute right-0 z-30 mt-2 min-w-[288px] rounded-lg border border-gray-200 bg-white p-1.5 shadow-lg dark:border-gray-700 dark:bg-gray-800">
                                    <div class="px-2.5 py-1.5 text-xs font-bold uppercase tracking-wide text-gray-400 dark:text-gray-500">{{ 'hostConsent.import.heading'|trans }}</div>
                                    {% for p in prior %}
                                        <button type="button"
                                                onclick="this.closest('details')?.removeAttribute('open')"
                                                data-action="live#action"
                                                data-live-action-param="importFrom"
                                                data-live-alias-param="{{ p.alias }}"
                                                class="flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-left transition hover:bg-gray-100 dark:hover:bg-gray-700/60">
                                            <span class="grid size-8 flex-none place-items-center rounded-lg bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300">
                                                <twig:ux:icon name="ph:calendar-blank" class="size-4" />
                                            </span>
                                            <span class="min-w-0">
                                                <b class="block truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{{ p.name }}</b>
                                                <span class="block truncate text-xs text-gray-500 dark:text-gray-400">{{ p.title ?: 'hostConsent.import.untitled'|trans }}</span>
                                            </span>
                                        </button>
                                    {% endfor %}
                                </div>
                            </details>
                        </div>
                    {% endif %}

                    {# ── title ── #}
                    <div class="mb-4">
                        <label class="mb-1 block text-sm font-medium leading-5 text-gray-700 dark:text-gray-50" for="hc-title">{{ 'hostConsent.field.title'|trans }}</label>
                        <input id="hc-title" type="text"
                               {{ frozen ? 'disabled' : '' }}
                               data-model="debounce(200)|title"
                               value="{{ title }}"
                               placeholder="{{ 'hostConsent.field.titlePlaceholder'|trans }}"
                               class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 disabled:cursor-not-allowed disabled:opacity-50">
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ 'hostConsent.field.titleHelp'|trans }}</p>
                    </div>

                    {# ── text — Lexical markdown editor (bold/italic/lists), same as the
                       mailing/consent editors. Read-only prose while frozen; the live
                       editor is protected from morphs with data-live-ignore and bound to
                       the `text` model via the hidden textarea. ── #}
                    <div class="mb-4">
                        <label class="mb-1 block text-sm font-medium leading-5 text-gray-700 dark:text-gray-50" for="hc-text">{{ 'hostConsent.field.text'|trans }}</label>

                        {% if frozen %}
                            <div class="prose prose-sm dark:prose-invert max-w-none rounded-md 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">{{ text|markdown_to_html }}</div>
                        {% else %}
                            <div id="hc-text" data-controller="ferienpass--admin-lexical" data-live-ignore>
                                <div class="lexical-container flex flex-col rounded-md border border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800">
                                    <div data-ferienpass--admin-lexical-target="toolbar" class="lexical-toolbar flex flex-wrap items-center gap-1 rounded-t-md border-b border-gray-200 bg-gray-50 p-1 dark:border-gray-700 dark:bg-gray-900">
                                        {% set buttons = [
                                            { action: 'bold',   icon: 'ph:text-b',        label: 'consentForm.text.bold'|trans },
                                            { action: 'italic', icon: 'ph:text-italic',   label: 'consentForm.text.italic'|trans },
                                            { type: 'separator' },
                                            { action: 'ul',     icon: 'ph:list-bullets',  label: 'hostConsent.field.bulletList'|trans },
                                            { action: 'ol',     icon: 'ph:list-numbers',  label: 'hostConsent.field.numberedList'|trans },
                                        ] %}
                                        {% for btn in buttons %}
                                            {% if btn.type|default == 'separator' %}
                                                <div class="mx-1 h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
                                            {% else %}
                                                <button type="button" title="{{ btn.label }}"
                                                        class="flex items-center justify-center rounded p-1.5 text-gray-700 transition-colors hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 [&>svg]:size-4"
                                                        data-action="click->ferienpass--admin-lexical#dispatchAction"
                                                        data-ferienpass--admin-lexical-action-param="{{ btn.action }}">
                                                    <span class="sr-only">{{ btn.label }}</span>
                                                    {{ ux_icon(btn.icon) }}
                                                </button>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                    <div data-ferienpass--admin-lexical-target="editor" contenteditable="true" class="lexical-editor prose prose-sm dark:prose-invert max-w-none min-h-[200px] px-4 py-3 text-gray-900 outline-none dark:text-gray-100/90"></div>
                                </div>
                                <textarea data-model="text" data-ferienpass--admin-lexical-target="input" class="hidden">{{ text }}</textarea>
                            </div>
                            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ 'hostConsent.field.textHelp'|trans }}</p>
                        {% endif %}
                    </div>

                    {# ── info: access is gated ── #}
                    <twig:Admin:Alert type="info">
                        <b class="block font-semibold">{{ 'hostConsent.noteGate.title'|trans({}, 'admin') }}</b>
                        <span class="mt-0.5 block">{{ 'hostConsent.noteGate.text'|trans({}, 'admin') }}</span>
                    </twig:Admin:Alert>
                </div>
            {% else %}
                {# ── disabled empty state ── #}
                <div class="mt-5 rounded-lg border border-dashed border-gray-300 px-6 py-10 text-center dark:border-gray-700">
                    <twig:ux:icon name="ph:shield" 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">{{ 'hostConsent.disabled.title'|trans }}</p>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{{ 'hostConsent.disabled.text'|trans }}</p>
                </div>
            {% endif %}
        </div>

        {# ─────────── live preview (host view) — mirrors the native admin gate ─────────── #}
        <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-xs 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>
                    {{ 'hostConsent.preview.label'|trans }}
                </span>
                <span class="text-xs text-gray-400 dark:text-gray-500">{{ 'hostConsent.preview.hint'|trans }}</span>
            </div>

            <div class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
                <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 bg-gray-50 p-4 dark:bg-gray-950/40">
                    {# list header #}
                    <div class="mb-3 flex items-end justify-between gap-2.5">
                        <div class="min-w-0">
                            <div class="truncate text-xs font-medium text-gray-400 dark:text-gray-500">{{ this.edition.name }} › {{ 'hostConsent.preview.offerFallback'|trans }}</div>
                            <div class="text-base font-semibold tracking-tight text-gray-900 dark:text-gray-100">{{ 'hostConsent.preview.listTitle'|trans }}</div>
                        </div>
                        <span class="whitespace-nowrap rounded-full bg-gray-100 px-2.5 py-1 text-xs font-bold text-gray-500 dark:bg-gray-800 dark:text-gray-400">{{ 'hostConsent.preview.count'|trans({count: 3}) }}</span>
                    </div>

                    {% if enabled %}
                        {# native-styled gate #}
                        <div class="rounded-lg border border-gray-200 bg-white p-3.5 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                            <div class="flex items-start gap-2.5 rounded-lg border border-amber-300 bg-amber-50 px-3 py-2.5 text-amber-800 dark:border-amber-700 dark:bg-amber-900/20 dark:text-amber-200">
                                <twig:ux:icon name="ph:lock-simple" class="mt-0.5 size-4 flex-none" />
                                <div class="min-w-0 text-xs leading-5">
                                    <b class="block font-semibold">{{ 'hostConsent.gate.lockedTitle'|trans }}</b>
                                    <span>{{ 'hostConsent.gate.lockedText'|trans }}</span>
                                </div>
                            </div>

                            <div class="mt-3 text-sm font-semibold text-gray-900 dark:text-gray-100">{{ title|trim ?: 'hostConsent.gate.untitled'|trans }}</div>
                            <div class="prose prose-sm dark:prose-invert mt-1.5 max-h-32 max-w-none overflow-y-auto rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-gray-600 dark:border-gray-700 dark:bg-gray-800/60 dark:text-gray-300">{% if text|trim %}{{ text|markdown_to_html }}{% else %}{{ 'hostConsent.preview.textPlaceholder'|trans }}{% endif %}</div>

                            <div class="mt-3 flex items-start gap-2.5">
                                <span class="mt-0.5 size-4 flex-none rounded-sm border border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-800"></span>
                                <span class="text-xs leading-snug text-gray-600 dark:text-gray-300">{{ 'hostConsent.gate.checkbox'|trans }}</span>
                            </div>

                            <div class="mt-3 rounded-md bg-primary-600 py-2 text-center text-xs font-semibold text-white">{{ 'hostConsent.gate.submit'|trans }}</div>
                            <div class="mt-2 text-center text-xs text-gray-400 dark:text-gray-500">{{ 'hostConsent.gate.foot'|trans }}</div>
                        </div>

                        {# blurred roster behind the gate #}
                        <div class="mt-3 opacity-50 blur-[1.5px]">
                            {% for p in [{i:'MM', n:'Mia Müller'}, {i:'LK', n:'Leon Krause'}, {i:'FS', n:'Frieda Sander'}] %}
                                <div class="flex items-center gap-2.5 border-t border-gray-200 py-2.5 first:border-0 dark:border-gray-700">
                                    <span class="grid size-[30px] flex-none place-items-center rounded-lg bg-gray-200 text-xs font-bold text-gray-500 dark:bg-gray-700 dark:text-gray-300">{{ p.i }}</span>
                                    <span class="text-sm font-semibold text-gray-700 dark:text-gray-200">{{ p.n }}</span>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="mb-3 flex items-center gap-2 rounded-lg border border-emerald-300 bg-emerald-50 px-3 py-2 text-xs font-semibold text-emerald-800 dark:border-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-200">
                            <twig:ux:icon name="ph:check" class="size-3.5 flex-none" />
                            {{ 'hostConsent.preview.openNote'|trans }}
                        </div>
                        {% for p in [{i:'MM', n:'Mia Müller'}, {i:'LK', n:'Leon Krause'}, {i:'FS', n:'Frieda Sander'}] %}
                            <div class="flex items-center gap-2.5 border-t border-gray-200 py-2.5 first:border-0 dark:border-gray-700">
                                <span class="grid size-[30px] flex-none place-items-center rounded-lg bg-gray-200 text-xs font-bold text-gray-500 dark:bg-gray-700 dark:text-gray-300">{{ p.i }}</span>
                                <span class="text-sm font-semibold text-gray-700 dark:text-gray-200">{{ p.n }}</span>
                            </div>
                        {% endfor %}
                    {% endif %}
                </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="frozen" :sections="sections" :section="section" :params="this.footerParams()" :editRoute="this.footerEditRoute()" :viewRoute="this.footerViewRoute()" :useLiveAction="true" />
</div>
