{% set cr = 'ferienpass/cms-signin-registration' %}
{% set err_cls = 'border-red-500 ring-4 ring-red-500/30' %}
{#
    Use the `|stimulus_controller` **filter** to chain a second controller,
    not the `.addController()` method. The method is declared `void` in
    `StimulusAttributes`, so a chained call like
    `stimulus_controller(cr).addController('…')` returns null and crashes
    `attributes.defaults(null)`. The filter form delegates to
    `StimulusTwigExtension::appendStimulusController()` which returns the
    `StimulusAttributes` instance for further chaining.
#}
<div {{ attributes.defaults(stimulus_controller(cr)|stimulus_controller('ferienpass/cms-anon-participants'))|raw }}>

    <div class="mx-auto w-full">
        <div class="mb-6">
            <p class="text-xl font-bold leading-tight text-gray-900 dark:text-white">{{ 'registration.intro.title'|trans({}, 'cms') }}</p>
            <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-300">{{ 'registration.title'|trans({}, 'cms') }}</p>
        </div>

        {# `remember` rides the same submit event as the live action to persist
           the chosen method to localStorage (returning-user hint). Literal
           `data-action` string: controller name normalised `'/' → '--'`. #}
        {{ form_start(form, {
            attr: {
                'data-action': 'live#action:prevent ferienpass--cms-signin-registration#remember',
                'data-live-action-param': 'submit'
            }
        }) }}

        <div class="grid gap-4 grid-cols-2">
            <div>{{ form_row(form.firstname) }}</div>
            <div>{{ form_row(form.lastname) }}</div>

            {# E-mail with leading mail icon #}
            <div class="col-span-2">
                {{ form_label(form.email) }}
                <div class="relative mt-1">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400" aria-hidden="true">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
                    </span>
                    {{ form_widget(form.email, { attr: { class: ('pl-10' ~ (form.email.vars.errors|length ? ' ' ~ err_cls : '')), autocomplete: 'email' } }) }}
                </div>
                {{ form_errors(form.email) }}
            </div>

            {# Sign-in method picker — passkey (recommended) or password #}
            <div class="col-span-2">
                <span class="block text-sm font-medium text-gray-600 dark:text-gray-200">{{ 'registration.method.label'|trans({}, 'cms') }}</span>
                <div class="mt-1.5 grid grid-cols-2 gap-1.5 rounded-lg bg-gray-100 p-1 dark:bg-gray-700" role="radiogroup" aria-label="{{ 'registration.method.label'|trans({}, 'cms') }}">
                    <button type="button" role="radio" aria-checked="true"
                            {{ stimulus_target(cr, 'passkeyButton') }} {{ stimulus_action(cr, 'usePasskey') }}
                            class="flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold focus:outline-none bg-white text-gray-900 shadow-sm dark:bg-gray-800 dark:text-gray-100">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="12" r="4"/><path d="M12 12h10"/><path d="M18 12v3"/><path d="M22 12v2"/></svg>
                        {{ 'registration.method.passkey'|trans({}, 'cms') }}
                        <span class="rounded-full bg-primary-100 px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">{{ 'registration.method.recommended'|trans({}, 'cms') }}</span>
                    </button>
                    <button type="button" role="radio" aria-checked="false"
                            {{ stimulus_target(cr, 'passwordButton') }} {{ stimulus_action(cr, 'usePassword') }}
                            class="flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-semibold focus:outline-none text-gray-500 dark:text-gray-300">
                        <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
                        {{ 'registration.method.password'|trans({}, 'cms') }}
                    </button>
                </div>
                {{ form_widget(form.method, { attr: stimulus_target(cr, 'methodInput').toArray() }) }}
            </div>

            {# Password with leading lock icon and show/hide toggle #}
            <div class="col-span-2" style="display: none" {{ stimulus_target(cr, 'passwordField') }}>
                {{ form_label(form.plainPassword) }}
                <div class="relative mt-1">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400" aria-hidden="true">
                        <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
                    </span>
                    {{ form_widget(form.plainPassword, { attr: stimulus_target(cr, 'password').toArray()|merge({
                        class: ('pl-10 pr-11' ~ (form.plainPassword.vars.errors|length ? ' ' ~ err_cls : '')),
                        placeholder: 'Mindestens 8 Zeichen',
                        autocomplete: 'new-password',
                    }) }) }}
                    <button type="button" {{ stimulus_action(cr, 'togglePassword') }}
                            aria-label="{{ 'login.showPassword'|trans({}, 'cms') }}"
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 focus:outline-none dark:hover:text-gray-200">
                        <svg {{ stimulus_target(cr, 'passwordEye') }} class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
                        <svg {{ stimulus_target(cr, 'passwordEyeOff') }} style="display: none" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 5.09A10.94 10.94 0 0 1 12 5c6 0 10 7 10 7a17.8 17.8 0 0 1-3.17 3.86"/><path d="M6.61 6.61A17.84 17.84 0 0 0 2 12s4 7 10 7a10.94 10.94 0 0 0 5.39-1.41"/><line x1="2" y1="2" x2="22" y2="22"/></svg>
                    </button>
                </div>
                {{ form_help(form.plainPassword) }}
                {{ form_errors(form.plainPassword) }}
            </div>

            {# Passkey chosen — no password needed #}
            <div class="col-span-2" {{ stimulus_target(cr, 'passkeyInfo') }}>
                <div class="flex items-start gap-3 rounded-lg border border-green-300 bg-green-50 px-4 py-3 text-sm text-green-800 dark:border-green-700 dark:bg-green-900/20 dark:text-green-200">
                    <svg class="mt-0.5 h-5 w-5 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="12" r="4"/><path d="M12 12h10"/><path d="M18 12v3"/><path d="M22 12v2"/></svg>
                    <span>{{ 'registration.passkeyInfo'|trans({}, 'cms') }}</span>
                </div>
            </div>

            <div>{{ form_row(form.mobile, { attr: { class: (form.mobile.vars.errors|length ? err_cls : '') } }) }}</div>
            <div>{{ form_row(form.phone, { attr: { class: (form.phone.vars.errors|length ? err_cls : '') } }) }}</div>
        </div>

        <p class="mt-6 text-sm font-medium leading-5 text-gray-600 dark:text-gray-200">{{ 'registration.nextStepInfo'|trans({}, 'cms') }}</p>

        {% set privacyInformation = 'registration.privacyInformation'|trans(domain='cms') %}
        {% if 'registration.privacyInformation' != privacyInformation %}
            <details class="group mt-4 rounded-lg bg-gray-50 px-4 dark:bg-gray-700/40">
                <summary class="flex cursor-pointer list-none items-center gap-2 py-3 text-sm font-semibold text-gray-700 dark:text-gray-200 [&::-webkit-details-marker]:hidden">
                    <svg class="h-4 w-4 flex-none text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                    {{ 'registration.privacyRead'|trans({}, 'cms') }}
                    <svg class="ml-auto h-4 w-4 text-gray-400 transition group-open:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                </summary>
                <p class="pb-3.5 text-sm leading-relaxed text-gray-500 dark:text-gray-300">{{ privacyInformation }}</p>
            </details>
        {% endif %}

        <div class="mt-6">
            <button class="w-full inline-flex items-center justify-center gap-2 rounded-md border border-transparent bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 active:bg-primary-700"
                    type="submit">
                <span {{ stimulus_target(cr, 'submitPassword') }} style="display: none">{{ 'registration.submit'|trans({}, 'cms') }}</span>
                <span {{ stimulus_target(cr, 'submitPasskey') }}>{{ 'registration.submitPasskey'|trans({}, 'cms') }}</span>
                <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
            </button>
        </div>

        <p class="mt-4 flex items-start gap-2 text-xs leading-relaxed text-gray-500 dark:text-gray-400">
            <svg class="mt-0.5 h-3.5 w-3.5 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
            {{ 'signIn.minorNote'|trans({}, 'cms') }}
        </p>

        {{ form_end(form) }}

        <div class="mt-6 flex items-center justify-center gap-2 text-sm text-gray-500 dark:text-gray-400">
            {{ 'registration.haveAccount'|trans({}, 'cms') }}
            {# Literal `data-action` — Twig components don't accept the
               `{{ stimulus_action(...) }}` form because they parse like HTML
               tags and need discrete `attr="value"` pairs. Controller-name
               normalisation: `'/' → '--'`, `'_' → '-'`. See
               StimulusAttributes::normalizeControllerName(). #}
            <twig:Cms:Button variant="link" size="xs" data-action="ferienpass--cms-signin#showLogin">
                {{ 'registration.toLogin'|trans({}, 'cms') }} →
            </twig:Cms:Button>
        </div>
    </div>

</div>
