{# The application form that unfolds under the selected participant — extras,
   lot blocks (priority / friends / double booking), consents, submit. For an
   already-registered participant it shows the status + withdraw instead.

   Submit gating is mirrored client-side by the cms-application-form Stimulus
   controller (targets: submit / blockerOk / blockerOpen); the server-rendered
   state below covers the initial render and every live re-render.
   Include WITHOUT `only` (needs `this`, live props and the full context). #}

{% set p = participant %}
{% set attendance = this.attendance(p) %}
{% set is_lot = applicationSystem.type == 'lot' %}
{% set ctl = 'ferienpass--cms-application-form' %}

<div class="mt-6">

    {# ── divider: "Anmeldung für …" ── #}
    <div class="mb-5 flex items-center gap-3.5" aria-hidden="true">
        <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
        <span class="text-[11px] font-bold uppercase tracking-widest text-primary-700 dark:text-primary-300">
            {{ 'applicationForm.applicationFor'|trans({name: p.firstname}, 'cms') }}
        </span>
        <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
    </div>

    {% if attendance is null %}

        {% set participantConsents = this.participantOfferConsents(p) %}
        {% set extras = offer.applicationExtra|default([]) %}
        {% set lot_task = applicationSystem.task|default(null) %}
        {% set has_lot_blocks = is_lot and ((lot_task and lot_task.maxApplications) or system_settings_manager.isFriendsBooking() or this.variantApplications is not empty) %}

        {% if participantConsents is empty and extras is empty and not has_lot_blocks %}
            {# nothing to fill in — ready to apply right away #}
            <div class="flex items-center gap-3.5 rounded-lg border border-[#cce0d4] bg-[#e5efe9] p-4 dark:border-[#245a46]/60 dark:bg-[#2f6f57]/15">
                <div class="grid size-10 flex-none place-items-center rounded-md bg-white text-[#2f6f57] dark:bg-gray-900 dark:text-[#5f9a7e]">
                    <twig:ux:icon name="lucide:check" class="size-5" />
                </div>
                <div class="text-sm leading-5">
                    <b class="block font-semibold text-[#1f4a3a] dark:text-[#d9e7df]">{{ 'applicationForm.ready.title'|trans({name: p.firstname}, 'cms') }}</b>
                    <span class="text-xs font-medium text-gray-600 dark:text-gray-300">{{ 'applicationForm.ready.text'|trans({}, 'cms') }}</span>
                </div>
            </div>
        {% endif %}

        <div class="flex flex-col gap-6 [&>div:first-child]:border-t-0 [&>div:first-child]:pt-0">

            {# offer-specific extra questions #}
            {% include '@Contao/components/application_form/_extras.html.twig' with {
                extras: extras,
                extra: extra,
                scope: 'p' ~ p.id,
                form: this,
                fileErrors: extraFileErrors,
                missing: extraErrors,
            } only %}

            {# lot: priority of this application #}
            {% if is_lot and lot_task and lot_task.maxApplications %}
                <div class="border-t border-gray-200 pt-5 dark:border-gray-700">
                    <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
                        {{ 'applicationForm.lottery.priorityLabel'|trans({}, 'cms') }}</p>
                    <p class="mt-1">
                        <span class="sr-only">{{ 'applicationList.header.priority'|trans({}, 'cms') }} {{ newPriority }}</span>
                        <span aria-hidden="true" class="-ml-0.5 flex items-center">
                            {% for i in lot_task.maxApplications..1 %}
                                <twig:ux:icon name="lucide:star" class="block size-4 {{ newPriority > i ? 'text-gray-300 dark:text-gray-600' : 'text-amber-500' }}" />
                            {% endfor %}
                        </span>
                    </p>
                    <p class="mt-1 text-xs leading-5 text-gray-500 dark:text-gray-400">{{ 'applicationForm.lottery.priorityInfo'|trans({}, 'cms') }}</p>
                </div>
            {% endif %}

            {# lot: friends booking / Losgemeinschaft #}
            {% if is_lot and system_settings_manager.isFriendsBooking() %}
                {% include '@Contao/components/application_form/_friends_booking.html.twig' %}
            {% endif %}

            {# lot: double booking of alternate dates #}
            {% if is_lot and this.variantApplications is not empty %}
                <div class="border-t border-gray-200 pt-5 dark:border-gray-700">
                    <p class="text-sm font-medium leading-5 text-amber-700 dark:text-amber-400">{{ 'applicationForm.lottery.doubleBookingInfo'|trans({date: component('Cms:OfferDateSingle', {date: this.variantApplications|first.offer.dates|first, noTime: true})}, 'cms') }}</p>
                    <label class="mt-2.5 flex cursor-pointer items-start gap-3">
                        <input id="opt-doubleBooking"
                               data-model="norender|doubleBooking"
                               type="checkbox"
                               {% if doubleBooking %}checked{% endif %}
                               class="mt-0.5 size-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
                        <span class="text-sm font-medium leading-5 text-gray-900 dark:text-gray-100">{{ 'applicationForm.lottery.visitMultipleTimes'|trans({}, 'cms') }}</span>
                    </label>
                </div>
            {% endif %}

            {# per-participant consents — same widget as the anonymous flow #}
            {% include '@Contao/components/application_form/_consents.html.twig' with {
                states: participantConsents,
                scope: 'p' ~ p.id,
                participantDecisions: participantDecisions,
            } only %}

            {# the offer shares the date of birth with the host — must be disclosed #}
            {% include '@Contao/components/application_form/_dob_notice.html.twig' with { offer: offer } only %}

            {# ── footer: cancel · blocker · submit ── #}
            {% set canApply = true %}
            {% for state in participantConsents %}
                {% set decision = participantDecisions[state.consentForm.id ~ '']|default(null) %}
                {% if (state.compulsory == 'compulsory' and decision != '1') or (state.compulsory == 'force_decision' and decision is null) %}
                    {% set canApply = false %}
                {% endif %}
            {% endfor %}
            {% for question in extras %}
                {% set answer = extra[question.uuid]|default('') %}
                {% if answer is empty or (question.type == 'yn' and answer not in ['y', 'n']) %}
                    {% set canApply = false %}
                {% endif %}
            {% endfor %}
            <div class="flex flex-wrap items-center justify-between gap-4 border-t border-gray-200 pt-5 dark:border-gray-700">
                <twig:Cms:Button variant="ghost"
                                 data-action="live#action:prevent"
                                 data-live-action-param="proceed"
                                 data-live-participant-param="{{ p.id }}"
                                 class="gap-1.5">
                    <twig:ux:icon name="lucide:arrow-left" class="size-3.5" />
                    {{ 'applicationForm.cancel'|trans({}, 'cms') }}
                </twig:Cms:Button>
                <div class="flex items-center gap-3">
                    <span data-ferienpass--cms-application-form-target="blockerOk"
                          class="{{ canApply ? '' : 'hidden ' }}items-center gap-1.5 text-xs font-medium text-[#245a46] [&:not(.hidden)]:inline-flex dark:text-[#9cc4ae]">
                        <twig:ux:icon name="lucide:check" class="size-4" />
                        {{ 'applicationForm.blocker.ok'|trans({}, 'cms') }}
                    </span>
                    {% if participantConsents is not empty or extras is not empty %}
                        <span data-ferienpass--cms-application-form-target="blockerOpen"
                              class="{{ canApply ? 'hidden ' : '' }}items-center gap-1.5 text-xs font-medium text-amber-600 [&:not(.hidden)]:inline-flex dark:text-amber-400">
                            <twig:ux:icon name="lucide:info" class="size-4" />
                            {{ 'applicationForm.blocker.open'|trans({name: p.firstname}, 'cms') }}
                        </span>
                    {% endif %}
                    <twig:Cms:Button variant="primary"
                                     size="lg"
                                     type="submit"
                                     data-action="live#action"
                                     data-live-action-param="apply"
                                     data-ferienpass--cms-application-form-target="submit"
                                     :disabled="not canApply"
                                     class="gap-2">
                        {{ (is_lot ? 'applicationForm.submitLot' : 'applicationForm.submitFirstcome')|trans({}, 'cms') }}
                        <twig:ux:icon name="lucide:arrow-right" class="size-4" />
                    </twig:Cms:Button>
                </div>
            </div>

        </div>

    {% else %}

        {# already registered — status + withdraw #}
        <div class="flex flex-col gap-5">
            <div class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200">
                <span class="font-medium">{{ 'applicationForm.status.current'|trans({}, 'cms') }}</span>
                <twig:Cms:ApplicationStatusBadge :attendance="attendance" size="xs" :emoji="true" />
            </div>

            {% if attendancesDue is not empty and integrations_manager.isIntegrationConfigured('PmPaymentProvider') %}
                <div class="flex items-start gap-3 text-sm text-yellow-700 dark:text-yellow-500">
                    <twig:ux:icon name="lucide:triangle-alert" aria-hidden="true" class="size-6 flex-none text-yellow-500 dark:text-yellow-400" />
                    <span class="flex-1">
                        <strong class="font-medium">{{ 'applicationForm.paymentPending.title'|trans({}, 'cms') }}</strong>
                        {{ 'applicationForm.paymentPending.text'|trans({'link_start': '<a href="'~path('cms', { to: 'applications' })~'" class="font-medium underline hover:no-underline">', 'link_end': '</a>'}, 'cms')|raw }}
                    </span>
                </div>
            {% endif %}

            {% if workflow_can(attendance, 'withdraw') %}
                {% if offer.fee and attendance.paid %}
                    {% set info_key = inGracePeriod ? 'attendanceWithdraw.infoInGracePeriod' : 'attendanceWithdraw.infoOutsideGracePeriod' %}
                    {% set info = info_key|trans({firstname: p.firstname}, 'cms') %}
                    {% if info_key != info %}
                        <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ info }}</p>
                    {% endif %}
                {% endif %}

                <div class="flex flex-wrap items-center justify-between gap-4 border-t border-gray-200 pt-5 dark:border-gray-700">
                    <twig:Cms:Button variant="ghost"
                                     data-action="live#action:prevent"
                                     data-live-action-param="proceed"
                                     data-live-participant-param="{{ p.id }}"
                                     class="gap-1.5">
                        <twig:ux:icon name="lucide:arrow-left" class="size-3.5" />
                        {{ 'applicationForm.cancel'|trans({}, 'cms') }}
                    </twig:Cms:Button>
                    <twig:Cms:Button variant="destructive"
                                     type="submit"
                                     data-action="live#action"
                                     data-live-action-param="withdraw">
                        {{ 'applicationForm.withdrawFrom'|trans({name: p.firstname}, 'cms') }}
                    </twig:Cms:Button>
                </div>
            {% endif %}
        </div>

    {% endif %}
</div>
