{# Anonymous entry — sign-in form with an optional "continue without account"
   path, and the one-step anonymous application form. Rendered when no user is
   logged in and no anonymous participants exist yet.
   Include WITHOUT `only` (needs live props, `_errors` and the full context). #}

{% set anonAllowed = isAnonymousAllowed %}

{% if not (hasNewParticipant and anonAllowed) %}

    {# 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) }) } %}

    {% if anonAllowed %}
        <div class="my-6 flex items-center gap-3 text-xs font-semibold uppercase tracking-wider text-gray-400">
            <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
            {{ 'applicationForm.anonymous.or'|trans({}, 'cms') }}
            <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
        </div>
        <button type="button"
                data-action="live#action:prevent"
                data-live-action-param="new"
                class="inline-flex w-full items-center justify-center gap-2 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium leading-5 text-gray-700 transition hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">
            <twig:ux:icon name="lucide:user-round" class="size-4" />
            {{ 'applicationForm.continueWithoutAccount'|trans({}, 'cms') }}
        </button>
        <p class="mt-2 text-center text-sm text-gray-500 dark:text-gray-300">{{ 'applicationForm.anonymousInfo'|trans({}, 'cms') }}</p>
    {% endif %}

{% else %}

    {# ───── One-step anonymous application form ───── #}
    {% set fld_lbl = 'mb-1 block text-sm font-medium leading-5 text-gray-700 dark:text-gray-50' %}
    {% set fld_base = 'block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-gray-100 dark:bg-gray-900 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6' %}
    {% set fld_ok = 'ring-gray-300 placeholder:text-gray-400 focus:ring-primary-600' %}
    {% set fld_err = 'ring-red-300 placeholder:text-red-300 focus:ring-red-500' %}
    <form class="space-y-6">
        <div>
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-50">{{ 'applicationForm.anonymous.title'|trans({}, 'cms') }}</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ 'applicationForm.anonymous.intro'|trans({}, 'cms') }}</p>
        </div>

        {% if anonymousError %}
            <div class="rounded-md border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-700 dark:bg-red-900/20 dark:text-red-300">
                {{ anonymousError|trans({}, 'cms') }}
            </div>
        {% endif %}

        <div class="grid gap-4 sm:grid-cols-2">
            <div>
                <label for="anon-firstname" class="{{ fld_lbl }}">{{ 'participants.label.firstname'|trans({}, 'cms') }}</label>
                <input type="text" required data-model="norender|newParticipant.firstname" id="anon-firstname" autocomplete="given-name"
                       class="{{ fld_base }} {{ _errors.has('newParticipant.firstname') ? fld_err : fld_ok }}">
                {% if _errors.has('newParticipant.firstname') %}<p class="mt-1 text-sm text-red-600">{{ _errors.get('newParticipant.firstname') }}</p>{% endif %}
            </div>
            <div>
                <label for="anon-lastname" class="{{ fld_lbl }}">{{ 'participants.label.lastname'|trans({}, 'cms') }}</label>
                <input type="text" required data-model="norender|newParticipant.lastname" id="anon-lastname" autocomplete="family-name"
                       class="{{ fld_base }} {{ _errors.has('newParticipant.lastname') ? fld_err : fld_ok }}">
                {% if _errors.has('newParticipant.lastname') %}<p class="mt-1 text-sm text-red-600">{{ _errors.get('newParticipant.lastname') }}</p>{% endif %}
            </div>
            <div>
                <label for="anon-dob" class="{{ fld_lbl }}">{{ 'participants.label.dateOfBirth'|trans({}, 'cms') }}</label>
                <input type="date" required data-model="norender|newParticipantDateOfBirth" id="anon-dob"
                       class="{{ fld_base }} {{ _errors.has('newParticipant.dateOfBirth') ? fld_err : fld_ok }}">
                {% if _errors.has('newParticipant.dateOfBirth') %}<p class="mt-1 text-sm text-red-600">{{ _errors.get('newParticipant.dateOfBirth') }}</p>{% endif %}
            </div>
            <div>
                <label for="anon-email" class="{{ fld_lbl }}">{{ 'participants.label.email'|trans({}, 'cms') }}</label>
                <input type="email" required data-model="norender|newParticipant.email" id="anon-email" autocomplete="email"
                       class="{{ fld_base }} {{ _errors.has('newParticipant.email') ? fld_err : fld_ok }}">
                {% if _errors.has('newParticipant.email') %}<p class="mt-1 text-sm text-red-600">{{ _errors.get('newParticipant.email') }}</p>{% endif %}
            </div>
            <div>
                <label for="anon-phone" class="{{ fld_lbl }}">{{ 'participants.label.phone'|trans({}, 'cms') }}</label>
                <input type="tel" data-model="norender|newParticipant.phone" id="anon-phone" autocomplete="tel"
                       class="{{ fld_base }} {{ _errors.has('newParticipant.phone') ? fld_err : fld_ok }}">
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ 'applicationForm.anonymous.phoneOrMobileHint'|trans({}, 'cms') }}</p>
            </div>
            <div>
                <label for="anon-mobile" class="{{ fld_lbl }}">{{ 'participants.label.mobile'|trans({}, 'cms') }}</label>
                <input type="tel" data-model="norender|newParticipant.mobile" id="anon-mobile" autocomplete="tel"
                       class="{{ fld_base }} {{ _errors.has('newParticipant.mobile') ? fld_err : fld_ok }}">
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ 'applicationForm.anonymous.phoneOrMobileHint'|trans({}, 'cms') }}</p>
            </div>

            {% if accessCode is not null %}
                <div class="sm:col-span-2">
                    <label for="anon-acco" class="{{ fld_lbl }}">{{ 'registration.accessCode'|trans({}, 'cms') }}</label>
                    <input type="text" required data-model="norender|accessCode.code" id="anon-acco"
                           class="{{ fld_base }} {{ _errors.has('accessCode') ? fld_err : fld_ok }}">
                    {% if _errors.has('accessCode') %}<p class="mt-1 text-sm text-red-600">{{ _errors.get('accessCode') }}</p>{% endif %}
                </div>
            {% endif %}
        </div>

        {# Postal address — required only when the system says so
           (see ApplicationFormSpec::$requiresPostalAddress). #}
        {% if applicationSpec.requiresPostalAddress %}
            <div class="space-y-3 border-t border-gray-200 pt-4 dark:border-gray-700">
                <div>
                    <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'applicationForm.anonymous.postalAddressTitle'|trans({}, 'cms') }}</h4>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ 'applicationForm.anonymous.postalAddressHint'|trans({}, 'cms') }}</p>
                </div>
                <div class="grid gap-4 sm:grid-cols-6">
                    <div class="sm:col-span-6">
                        <label for="anon-street" class="{{ fld_lbl }}">{{ 'user.street'|trans({}, 'cms') }}</label>
                        <input type="text" required data-model="norender|newPostalAddress.street" id="anon-street" autocomplete="address-line1"
                               class="{{ fld_base }} {{ fld_ok }}">
                    </div>
                    <div class="sm:col-span-2">
                        <label for="anon-postal" class="{{ fld_lbl }}">{{ 'user.postalCode'|trans({}, 'cms') }}</label>
                        <input type="text" required data-model="norender|newPostalAddress.postalCode" id="anon-postal" autocomplete="postal-code"
                               class="{{ fld_base }} {{ fld_ok }}">
                    </div>
                    <div class="sm:col-span-4">
                        <label for="anon-city" class="{{ fld_lbl }}">{{ 'user.city'|trans({}, 'cms') }}</label>
                        <input type="text" required data-model="norender|newPostalAddress.city" id="anon-city" autocomplete="address-level2"
                               class="{{ fld_base }} {{ fld_ok }}">
                    </div>
                </div>
            </div>
        {% endif %}

        {# Offer-specific extra questions — same widget as the signed-in path #}
        {% include '@Contao/components/application_form/_extras.html.twig' with {
            extras: applicationSpec.extras,
            extra: extra,
            scope: 'anon',
            form: this,
            fileErrors: extraFileErrors,
            missing: extraErrors,
        } only %}

        {# When the offer requires consents, the applicant must state whether
           they may give them at all. A minor applying for themselves postpones
           the consents: they are not rendered here, and after the e-mail
           confirmation a link for the legal guardian is issued. Both
           account-level (step-1) and per-participant consents are collected
           inline here and follow the same guardian gate. #}
        {% set anonConsents = applicationSpec.offerConsents|merge(applicationSpec.participantConsents) %}
        {% if anonConsents is not empty %}
            <div class="space-y-3 border-t border-gray-200 pt-4 dark:border-gray-700">
                <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
                    <div class="min-w-0">
                        <h4 class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'applicationForm.anonymous.guardianQuestion'|trans({}, 'cms') }}</h4>
                        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ 'applicationForm.anonymous.guardianHint'|trans({}, 'cms') }}</p>
                    </div>
                    {% 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_on = 'bg-white text-gray-900 shadow-sm dark:bg-gray-800 dark:text-gray-100' %}
                    <span class="inline-grid flex-none grid-cols-2 gap-1.5 rounded-lg bg-gray-100 p-1 dark:bg-gray-700">
                        <label class="flex cursor-pointer select-none items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition {{ isLegalGuardian == '1' ? seg_on : seg_off }}">
                            <input type="radio" name="anon-guardian" value="1" class="sr-only"
                                   data-model="isLegalGuardian" {{ isLegalGuardian == '1' ? 'checked' }}>
                            {% if isLegalGuardian == '1' %}<twig:ux:icon name="lucide:check" class="size-3.5" />{% endif %}
                            {{ 'applicationForm.anonymous.guardianYes'|trans({}, 'cms') }}
                        </label>
                        <label class="flex cursor-pointer select-none items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold transition {{ isLegalGuardian == '0' ? seg_on : seg_off }}">
                            <input type="radio" name="anon-guardian" value="0" class="sr-only"
                                   data-model="isLegalGuardian" {{ isLegalGuardian == '0' ? 'checked' }}>
                            {% if isLegalGuardian == '0' %}<twig:ux:icon name="lucide:check" class="size-3.5" />{% endif %}
                            {{ 'applicationForm.anonymous.guardianNo'|trans({}, 'cms') }}
                        </label>
                    </span>
                </div>

                {% if isLegalGuardian == '0' %}
                    <div class="flex gap-2.5 rounded-lg bg-sky-50 px-3.5 py-3 text-sky-900 dark:bg-sky-400/10 dark:text-sky-300">
                        <twig:ux:icon name="lucide:info" class="mt-0.5 size-4 flex-none" />
                        <span class="text-[12.5px] leading-relaxed">{{ 'applicationForm.anonymous.guardianPostponeInfo'|trans({}, 'cms') }}</span>
                    </div>
                {% endif %}
            </div>
        {% endif %}

        {# The offer's consents (account-level step-1 + per-participant), same
           widget as the signed-in path, driven by the ApplicationFormBuilder
           spec so both flows stay aligned. Minors don't decide them — the
           guardian signs everything later via the link (see above). #}
        {% if isLegalGuardian != '0' %}
            {% include '@Contao/components/application_form/_consents.html.twig' with {
                states: anonConsents,
                scope: 'anon',
                participantDecisions: participantDecisions,
            } only %}
        {% endif %}

        {# 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 %}

        <p class="flex items-start gap-2 text-xs text-gray-500 dark:text-gray-400">
            <twig:ux:icon name="lucide:mail" class="mt-0.5 size-3.5 flex-none" />
            {{ 'applicationForm.anonymous.emailNotice'|trans({}, 'cms') }}
        </p>

        <div class="flex items-center justify-between gap-4">
            <twig:Cms:Button variant="ghost" data-action="live#action:prevent" data-live-action-param="new" class="gap-1.5">
                <twig:ux:icon name="lucide:arrow-left" class="size-3.5" />
                {{ 'applicationForm.anonymous.back'|trans({}, 'cms') }}
            </twig:Cms:Button>
            <twig:Cms:Button variant="primary" size="lg" type="submit" data-action="live#action:prevent" data-live-action-param="applyAnonymous" class="gap-2">
                {{ 'applicationForm.anonymous.submit'|trans({}, 'cms') }}
                <twig:ux:icon name="lucide:arrow-right" class="size-4" />
            </twig:Cms:Button>
        </div>
    </form>
{% endif %}
