{% trans_default_domain 'admin' %}

{# Standard "collect date of birth" field. Bound to the component's
   `collectDateOfBirth` LiveProp; rendered below the extra questions and
   editable independent of the online-application lock (it also applies to
   offline applications / the participant list). #}
{% macro dobField(checked, readonly) %}
    <div class="rounded-xl border px-4 py-3.5 transition {{ checked ? 'border-amber-200 bg-amber-50/50 dark:border-amber-500/30 dark:bg-amber-500/5' : 'border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800/40' }}">
        <div class="relative flex items-start">
            <div class="flex h-5 items-center">
                <input id="collectDateOfBirth" type="checkbox" data-model="collectDateOfBirth"
                       {{ checked ? 'checked' }} {{ readonly ? 'disabled' }}
                       class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50">
            </div>
            <div class="ml-3 text-sm leading-snug">
                <label for="collectDateOfBirth" class="block font-semibold text-gray-900 dark:text-gray-100 {{ readonly ? 'cursor-not-allowed' : 'cursor-pointer' }}">{{ 'offers.label.collectDateOfBirth'|trans({}, 'admin') }}</label>
                <p class="mt-0.5 text-xs leading-5 text-gray-600 dark:text-gray-400">{{ 'offers.applicationForm.dob.text'|trans({}, 'admin') }}</p>
            </div>
        </div>
        {% if checked %}
            <div class="mt-3 ml-7 flex items-start gap-2 rounded-lg border border-amber-300 bg-amber-100/60 px-3 py-2 text-xs font-medium leading-5 text-amber-800 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200">
                <twig:ux:icon name="ph:warning" class="mt-px size-4 flex-none text-amber-600 dark:text-amber-400" />
                <span>{{ 'offers.applicationForm.dob.warning'|trans({}, 'admin') }}</span>
            </div>
        {% endif %}
    </div>
{% endmacro %}

{% import _self as ui %}

{% set onlineApplication = offer.isOnlineApplication() %}
{% set isVariant = offer.isVariant %}
{# Offer-level read-only (variant / no edit permission) gates the DOB toggle
   and the save button; `locked` additionally gates the extra-questions editor
   on online application being enabled. #}
{% set offerReadonly = isReadonly|default(false) or isVariant %}
{% set locked = offerReadonly or not onlineApplication %}

{% set typeDefs = {
    yn:  { label: 'offers.applicationForm.yn'|trans,  sub: 'offers.applicationForm.examples.yn'|trans,  icon: 'ph:check-square' },
    int: { label: 'offers.applicationForm.int'|trans, sub: 'offers.applicationForm.examples.int'|trans, icon: 'ph:hash' },
    txt: { label: 'offers.applicationForm.txt'|trans, sub: 'offers.applicationForm.examples.txt'|trans, icon: 'ph:text-align-left' },
} %}

{% set firstDate = offer.dates|first|default(null) %}

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

    {% if not onlineApplication %}

        {# Online application is off → there is no form to attach questions to. #}
        <div class="rounded-xl border border-amber-300 bg-amber-50 p-5 dark:border-amber-500/30 dark:bg-amber-500/10">
            <div class="flex items-start gap-4">
                <span class="grid size-10 flex-none place-items-center rounded-lg bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300">
                    <twig:ux:icon name="ph:lock-simple" class="size-5" />
                </span>
                <div class="min-w-0">
                    <p class="text-sm font-semibold text-amber-900 dark:text-amber-200">{{ 'offers.applicationForm.locked.title'|trans }}</p>
                    <p class="mt-1 text-sm text-amber-800/90 dark:text-amber-200/80">{{ 'offers.applicationForm.locked.text'|trans }}</p>
                    <a href="{{ path('admin_offers_edit', { uuid: offer.uuid.toBase58, section: 'applications' }) }}"
                       class="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-amber-900 underline decoration-amber-400 underline-offset-2 hover:decoration-amber-600 dark:text-amber-200">
                        {{ 'offers.applicationForm.locked.cta'|trans }}
                        <twig:ux:icon name="ph:arrow-right" class="size-4" />
                    </a>
                </div>
            </div>
        </div>

        {# Date-of-birth is a standard field — still editable while the
           extra-questions editor above is locked. #}
        <div class="mt-5">{{ ui.dobField(collectDateOfBirth, offerReadonly) }}</div>

    {% else %}

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

            {# ─────────── editor ─────────── #}
            <div>
                {% if questions 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:chat-teardrop-text" 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.applicationForm.empty.title'|trans }}</p>
                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ 'offers.applicationForm.empty.text'|trans }}</p>
                    </div>
                {% else %}
                    <div class="flex flex-col gap-4">
                        {% for i, q in questions %}
                            <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">{{ i + 1 }}</span>
                                    <span class="flex-1 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">{{ 'offers.applicationForm.questionLabel'|trans }} {{ i + 1 }}</span>
                                    {% if not locked %}
                                        <button type="button"
                                                class="grid 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.applicationForm.removeQuestion'|trans }}"
                                                data-action="live#action"
                                                data-live-action-param="removeQuestion"
                                                data-live-index-param="{{ i }}">
                                            <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">
                                    {# question text #}
                                    <div>
                                        <label class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-200" for="q-{{ q.uuid }}">{{ 'offers.applicationForm.question'|trans }}</label>
                                        <input id="q-{{ q.uuid }}" type="text"
                                               {{ locked ? 'disabled' : '' }}
                                               data-model="debounce(200)|questions.{{ i }}.question"
                                               value="{{ q.question }}"
                                               placeholder="{{ 'offers.applicationForm.questionPlaceholder'|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">{{ 'offers.applicationForm.questionHelpShort'|trans }}</p>
                                    </div>

                                    {# answer type #}
                                    <div>
                                        <label class="mb-1.5 block text-xs font-semibold text-gray-700 dark:text-gray-200">{{ 'offers.applicationForm.type'|trans }}</label>
                                        <div class="flex flex-wrap gap-2">
                                            {% for value, def in typeDefs %}
                                                {% set on = q.type == value %}
                                                <button type="button"
                                                        {{ locked ? 'disabled' : '' }}
                                                        data-action="live#action"
                                                        data-live-action-param="setType"
                                                        data-live-index-param="{{ i }}"
                                                        data-live-value-param="{{ value }}"
                                                        aria-pressed="{{ on ? 'true' : 'false' }}"
                                                        class="flex min-w-[7rem] flex-1 items-center gap-2.5 rounded-lg border px-2.5 py-2 text-left transition disabled:cursor-not-allowed
                                                               {{ on ? 'border-primary-500 bg-primary-50 dark:border-primary-500 dark:bg-primary-500/10' : 'border-gray-200 bg-white hover:border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:border-gray-600' }}">
                                                    <span class="grid size-7 flex-none place-items-center rounded-md {{ on ? 'bg-white text-primary-600 dark:bg-gray-900' : 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-300' }}">
                                                        <twig:ux:icon name="{{ def.icon }}" class="size-4" />
                                                    </span>
                                                    <span class="leading-tight">
                                                        <span class="block text-xs font-semibold {{ on ? 'text-primary-700 dark:text-primary-300' : 'text-gray-700 dark:text-gray-200' }}">{{ def.label }}</span>
                                                        <span class="block text-[10.5px] font-medium text-gray-500 dark:text-gray-400">{{ def.sub }}</span>
                                                    </span>
                                                </button>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    {# required toggle #}
                                    <div>
                                        <button type="button"
                                                {{ locked ? 'disabled' : '' }}
                                                role="switch"
                                                aria-checked="{{ q.required ? 'true' : 'false' }}"
                                                data-action="live#action"
                                                data-live-action-param="toggleRequired"
                                                data-live-index-param="{{ i }}"
                                                class="inline-flex items-center gap-2.5 text-xs font-semibold text-gray-600 disabled:cursor-not-allowed dark:text-gray-300">
                                            <span class="relative h-5 w-9 flex-none rounded-full transition {{ q.required ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600' }}">
                                                <span class="absolute top-0.5 left-0.5 size-4 rounded-full bg-white shadow transition {{ q.required ? 'translate-x-4' : '' }}"></span>
                                            </span>
                                            {{ 'offers.applicationForm.required'|trans }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}

                {% if not locked %}
                    <button type="button"
                            data-action="live#action"
                            data-live-action-param="addQuestion"
                            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.applicationForm.addQuestion'|trans }}
                    </button>
                {% endif %}

                {# Standard fields — rendered below the extra-questions fieldset. #}
                <div class="mt-6 border-t border-gray-100 pt-5 dark:border-gray-800">
                    {{ ui.dobField(collectDateOfBirth, offerReadonly) }}
                </div>
            </div>

            {# ─────────── live preview ─────────── #}
            <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.applicationForm.preview.label'|trans }}
                    </span>
                    <span class="text-[11px] text-gray-400 dark:text-gray-500">{{ 'offers.applicationForm.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">
                        {# frontend-styled preview (always light, like the real form) #}
                        <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">{{ offer.name ?: 'offers.applicationForm.preview.offerFallback'|trans }}</b>
                                    <span class="text-[11.5px] text-[#7a746d]">
                                        {%- if firstDate and firstDate.begin %}{{ firstDate.begin|date('d.m.Y') }}{% if firstDate.begin|date('H:i') != '00:00' %} · {{ firstDate.begin|date('H:i') }}{% endif %}{% endif -%}
                                        {%- if (offer.minAge or offer.maxAge) %}{{ firstDate and firstDate.begin ? ' · ' }}{{ offer.minAge ?: '' }}–{{ offer.maxAge ?: '' }} {{ 'offers.applicationForm.preview.years'|trans }}{% endif -%}
                                    </span>
                                </span>
                            </div>

                            <h3 class="mt-4 mb-1 text-[19px] font-semibold tracking-tight text-[#2a1a10]">{{ 'offers.applicationForm.preview.heading'|trans }}</h3>
                            <p class="mb-3.5 text-[12.5px] text-[#7a746d]">{{ 'offers.applicationForm.preview.lede'|trans }}</p>

                            <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.applicationForm.preview.childName'|trans }}</b>
                                    <span class="text-[11.5px] text-[#7a746d]">{{ 'offers.applicationForm.preview.childAge'|trans }}{% if collectDateOfBirth %} · <span class="font-semibold text-[#2b2620]">{{ 'offers.applicationForm.preview.childDob'|trans }}</span>{% endif %}</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>

                            {% if collectDateOfBirth %}
                                <div class="mt-2 flex items-center gap-2 rounded-lg border border-[#cfe2d6] bg-[#f0f5f1] px-3 py-2 text-[11px] font-medium leading-snug text-[#2f6f57]">
                                    <twig:ux:icon name="ph:shield-check" class="size-3.5 flex-none" />
                                    <span>{{ 'offers.applicationForm.preview.dobNote'|trans }}</span>
                                </div>
                            {% endif %}

                            <div class="mt-5 mb-1 text-[11px] font-bold uppercase tracking-wider text-[#2b2620]">{{ 'offers.applicationForm.preview.group'|trans }}</div>

                            {% if questions is empty %}
                                <p class="text-[12px] italic text-[#a39d93]">{{ 'offers.applicationForm.preview.noQuestions'|trans }}</p>
                            {% else %}
                                {% for q in questions %}
                                    <div class="border-t border-dashed border-[#e3dccf] py-3 first:border-t-0 first:pt-0">
                                        <div class="mb-2 flex items-center gap-2">
                                            <b class="text-[13.5px] font-semibold {{ q.question|trim ? 'text-[#2b2620]' : 'text-[#c9c2b6]' }}">{{ q.question|trim ?: 'offers.applicationForm.preview.untitled'|trans }}</b>
                                            {% if q.required %}
                                                <span class="rounded-full bg-[#fbeed3] px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wide text-[#6b4910]">{{ 'offers.applicationForm.preview.required'|trans }}</span>
                                            {% else %}
                                                <span class="rounded-full bg-[#f3eee5] px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wide text-[#7a746d]">{{ 'offers.applicationForm.preview.optional'|trans }}</span>
                                            {% endif %}
                                        </div>
                                        {% if q.type == 'yn' %}
                                            <span class="inline-flex gap-1 rounded-lg bg-[#f3eee5] p-1">
                                                <span class="rounded-md px-4 py-1.5 text-[12.5px] font-semibold text-[#7a746d]">{{ 'offers.applicationForm.preview.optionYes'|trans }}</span>
                                                <span class="rounded-md px-4 py-1.5 text-[12.5px] font-semibold text-[#7a746d]">{{ 'offers.applicationForm.preview.optionNo'|trans }}</span>
                                            </span>
                                        {% elseif q.type == 'int' %}
                                            <span class="inline-block w-24 rounded-lg border-[1.5px] border-[#e3dccf] bg-white px-3 py-2 text-[13px] text-[#a39d93]">0</span>
                                        {% else %}
                                            <div class="min-h-[42px] w-full rounded-lg border-[1.5px] border-[#e3dccf] bg-white px-3 py-2 text-[12.5px] text-[#a39d93]">{{ 'offers.applicationForm.preview.freetext'|trans }}</div>
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            {% endif %}

                            <div class="mt-4 border-t border-[#ece6dd] pt-3.5">
                                <div class="mb-1 text-[11px] font-bold uppercase tracking-wider text-[#2b2620]">{{ 'offers.applicationForm.preview.consents'|trans }}</div>
                                <div class="mb-2 h-3 rounded bg-[#efe9df]"></div>
                                <div class="mb-2 h-3 w-[55%] rounded bg-[#efe9df]"></div>
                            </div>
                            <div class="mt-4 rounded-xl bg-[#2f6f57] py-2.5 text-center text-[13.5px] font-semibold text-white opacity-90">{{ 'offers.applicationForm.preview.submit'|trans }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    {% endif %}

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

    {# Save stays available even when the questions editor is locked, so the
       date-of-birth toggle can still be persisted — gate on offer-level
       read-only, not the online-application lock. #}
    <twig:Admin:Edit:Footer :isDirty="true" :isReadonly="offerReadonly" :sections="sections" :section="section" :params="{uuid: offer.uuid}" :useLiveAction="true" />
</div>
