{% trans_default_domain 'cms' %}
{# Post-login target for the passkey flow, fed to window.location below. Resolve
   it via cms_login_redirect(): explicit prop (e.g. the offer reader URL) > a
   SIGNED ?redirect= > current page. Never read a raw
   app.request.query.get('redirect') here — an unsigned value would be an open
   redirect / DOM-XSS gated only on a successful passkey login. #}
{% set success_redirect = cms_login_redirect(redirect|default(null)) %}

<div {{ attributes.defaults(stimulus_controller('ferienpass/cms-signin-login', {
    requestToken: contao_request_token(),
    targetPath: this.targetPath(app.request),
    magicUrl: path('cms_login_link_request'),
}))|raw }}>

    <div class="mx-auto w-full">

        {{ form_start(form, {
            attr: stimulus_action('ferienpass/cms-signin-login', 'submit:prevent').toArray()|merge({ onsubmit: 'return false' })
        }) }}

        <div class="mb-6 hidden" {{ stimulus_target('ferienpass/cms-signin-login', 'error') }}>
            {% embed '@FerienpassCore/Alert/error.html.twig' with {headline: 'login.error.headline'|trans} %}
                {% block content %}
                    <ul class="list-disc">
                        <li>{{ 'login.error.checkCredentials'|trans({}, 'cms') }}</li>
                        <li class="mt-1">{{ 'login.error.newHere'|trans({}, 'cms') }}</li>
                    </ul>
                {% endblock %}
            {% endembed %}
        </div>

        {# Secondary option shown when the last login was a passkey: reveal the e-mail/magic-link form on demand #}
        <button type="button" {{ stimulus_target('ferienpass/cms-signin-login', 'secondary') }}
                {{ stimulus_action('ferienpass/cms-signin-login', 'revealEmail') }}
                style="display: none"
                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">
            <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="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
            {{ 'login.withEmail'|trans }}
        </button>

        {# E-mail with leading mail icon #}
        <div {{ stimulus_target('ferienpass/cms-signin-login', 'emailBlock') }}>
            {{ form_label(form.username) }}
            <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.username, { attr: stimulus_target('ferienpass/cms-signin-login', 'username').toArray()|merge({
                    'data-action': 'keydown.enter->ferienpass--cms-signin-login#enterEmail input->ferienpass--cms-signin-login#emailInput blur->ferienpass--cms-signin-login#validateEmail',
                    class: 'pl-10',
                    placeholder: 'name@beispiel.de',
                    autocomplete: 'username webauthn',
                }) }) }}
            </div>
            {{ form_errors(form.username) }}
        </div>

        {# Default: passwordless via magic link, with an option to switch to password #}
        <div class="mt-4 grid gap-2" {{ stimulus_target('ferienpass/cms-signin-login', 'magicActions') }}>
            <button type="button" disabled {{ stimulus_target('ferienpass/cms-signin-login', 'magicButton') }} {{ stimulus_action('ferienpass/cms-signin-login', 'sendMagicLink') }}
                    class="inline-flex w-full items-center justify-center gap-2 rounded-md border border-transparent bg-primary-600 px-4 py-2 text-sm font-medium leading-5 text-white shadow-sm transition hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-primary-600">
                <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="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
                {{ 'signIn.magicLink.title'|trans }}
            </button>
            <button type="button" {{ stimulus_action('ferienpass/cms-signin-login', 'revealPassword') }}
                    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">
                <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>
                {{ 'login.withPassword'|trans }}
            </button>

            {# Passkey alternative, shown when the last login was a magic link (the top passkey button is hidden then) #}
            <div {{ stimulus_target('ferienpass/cms-signin', 'cond') }} data-when="last-magic" style="display: none"
                 data-controller="web-auth--webauthn-stimulus"
                 data-action="webauthn:assertion:success->ferienpass--cms-signin#rememberPasskey"
                 data-web-auth--webauthn-stimulus-request-options-url-value="/assertion/options"
                 data-web-auth--webauthn-stimulus-request-result-url-value="/assertion/result"
                 data-web-auth--webauthn-stimulus-request-success-redirect-uri-value="{{ success_redirect }}">
                <button type="button" data-action="web-auth--webauthn-stimulus#signin"
                        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">
                    <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>
                    {{ 'login.withPasskey'|trans }}
                </button>
            </div>
        </div>

        {# Magic-link sent (shown regardless of account existence to prevent enumeration) #}
        <div class="mt-4" style="display: none" {{ stimulus_target('ferienpass/cms-signin-login', 'magicSent') }}>
            <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="h-5 w-5 flex-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                <span>{{ 'signIn.magicLink.sent'|trans }}</span>
            </div>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
                {{ 'signIn.magicLink.sentToPrefix'|trans }} <strong class="break-all font-medium text-gray-800 dark:text-gray-100" {{ stimulus_target('ferienpass/cms-signin-login', 'sentEmail') }}></strong> {{ 'signIn.magicLink.sentToSuffix'|trans }}
                <twig:Cms:Button variant="link" size="xs" data-action="ferienpass--cms-signin-login#tryOtherEmail">
                    {{ 'signIn.magicLink.changeEmail'|trans({}, 'cms') }}
                </twig:Cms:Button>
            </p>
            <p class="mt-3 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.magicLink.noEmailHint'|trans }}
            </p>
        </div>

        {# Password login (revealed on demand, or upfront when the last login was a password) #}
        <div style="display: none" {{ stimulus_target('ferienpass/cms-signin-login', 'passwordBlock') }}>
            <div class="mt-4">
                {{ form_label(form.password) }}
                <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.password, { attr: stimulus_target('ferienpass/cms-signin-login', 'password').toArray()|merge({
                        class: 'pl-10 pr-11',
                        placeholder: '••••••••',
                        autocomplete: 'current-password',
                    }) }) }}
                    <button type="button" {{ stimulus_action('ferienpass/cms-signin-login', 'togglePassword') }}
                            aria-label="{{ 'login.showPassword'|trans }}"
                            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('ferienpass/cms-signin-login', '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('ferienpass/cms-signin-login', '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_errors(form.password) }}
            </div>

            <div class="mt-6 flex items-center justify-between">
                <div class="flex items-center">
                    {{ form_widget(form.autologin, { label: 'login.autologin'|trans, attr: stimulus_target('ferienpass/cms-signin-login', 'remember_me').toArray() }) }}
                </div>
                <div class="text-sm leading-5">
                    <a class="font-medium text-primary-600 hover:text-primary-500 focus:underline focus:outline-none dark:text-primary-400 dark:hover:text-primary-300"
                       href="{{ path('cms_lost_password') }}">{{ 'login.forgotPassword'|trans }}</a>
                </div>
            </div>

            <div class="mt-6">
                {{ form_widget(form.submit, { attr: { class: 'w-full' } }) }}
            </div>

            {# Always offer the passwordless methods in the password view, magic-link
               first. This is the one screen a stuck member reaches for — it holds
               "Passwort vergessen?" — so a passkey-only account (which has no
               password to reset) must find the magic link here, not a dead end.
               Not gated on the last-login method: a member who navigated in from
               the passkey/magic view needs it just as much as a returning password
               user. #}
            <div>
                <div class="my-5 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>
                    {{ 'signIn.or'|trans }}
                    <span class="h-px flex-1 bg-gray-200 dark:bg-gray-700"></span>
                </div>

                <div class="grid gap-2">
                    <button type="button" disabled {{ stimulus_target('ferienpass/cms-signin-login', 'magicButton') }} {{ stimulus_action('ferienpass/cms-signin-login', 'sendMagicLink') }}
                            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 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-white dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">
                        <svg class="h-4 w-4 flex-none" 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>
                        {{ 'signIn.magicLink.title'|trans }}
                    </button>

                    <div data-controller="web-auth--webauthn-stimulus"
                         data-action="webauthn:assertion:success->ferienpass--cms-signin#rememberPasskey"
                         data-web-auth--webauthn-stimulus-request-options-url-value="/assertion/options"
                         data-web-auth--webauthn-stimulus-request-result-url-value="/assertion/result"
                         data-web-auth--webauthn-stimulus-request-success-redirect-uri-value="{{ success_redirect }}">
                        <button type="button" data-action="web-auth--webauthn-stimulus#signin"
                                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">
                            <svg class="h-4 w-4 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>
                            {{ 'login.withPasskey'|trans }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{ form_end(form) }}

        <div class="mt-6 flex items-center justify-center gap-2 text-sm text-gray-500 dark:text-gray-400">
            {{ 'login.noAccount'|trans({}, 'cms') }}
            <twig:Cms:Button variant="link" size="xs" data-action="ferienpass--cms-signin#showRegister">
                {{ 'login.toRegister'|trans({}, 'cms') }} →
            </twig:Cms:Button>
        </div>
    </div>

</div>
