{% extends "@FerienpassAdmin/layout/minimal.html.twig" %}
{% trans_default_domain 'admin' %}

{#
   Multi-method admin login. Ported from cms-bundle's components/sign_in/login.html.twig
   with three views (magic / password / passkeyOnly) chosen at connect() time from
   `ferienpass.admin.lastLoginMethod` in localStorage. The actual form submit for
   password login goes through Symfony form_login (admin_login) — we don't intercept;
   only the magic-link button does a JSON POST to /admin/login/login_link/send.
#}

{% block content %}

<div {{ stimulus_controller('ferienpass/admin-signin-login', {
    magicUrl: path('admin_login_link_request'),
}) }}>

    <p class="mt-2 text-sm leading-5 text-gray-600 dark:text-gray-200 max-w">{{ 'login.intro'|trans }}</p>

    <div class="mt-8">

        {{ form_start(login, { attr: { action: path('admin_login') } }) }}

        {# A failed password/magic-link login redirects back here carrying the
           error in the FOSHttpCacheBundle `flashes` cookie (see
           AuthenticationFailureHandler) — the page body itself stays free of
           per-user state so it can be cached publicly. The signin_login
           controller reads that cookie on connect(), fills [data-message] and
           reveals this block. It is rendered inline (not via the toast flow)
           because /admin/flash-message isn't reachable for anonymous visitors. #}
        <div class="mb-6" style="display: none"
             {{ stimulus_target('ferienpass/admin-signin-login', 'error') }}>
            <twig:Admin:Alert type="error">
                <span data-message></span>
            </twig:Admin:Alert>
        </div>

        {# Hidden until the web-auth--webauthn-stimulus controller fires
           webauthn:assertion:failure (e.g. when /admin/assertion/result returns
           401 because the credential wasn't recognised). The signin_login
           controller toggles this block via its passkeyError target. #}
        <div class="mb-6" style="display: none"
             {{ stimulus_target('ferienpass/admin-signin-login', 'passkeyError') }}>
            <twig:Admin:Alert type="error">
                <strong class="font-semibold">Passkey-Anmeldung fehlgeschlagen.</strong>
                <span data-message>Der gewählte Passkey konnte nicht bestätigt werden. Versuchen Sie es erneut oder melden Sie sich mit Passwort an.</span>
            </twig:Admin:Alert>
        </div>

        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

        {# Fat passkey CTA + ODER divider — shown only when the last successful
           method on this device was a passkey. Mirrors the cms-bundle's
           sign-in panel: a row-shaped button with icon + title + caption +
           chevron, followed by a horizontal "Oder" rule, then the regular
           e-mail / magic-link form below as the fallback path. #}
        <div {{ stimulus_target('ferienpass/admin-signin-login', 'passkeyCta') }} style="display: none">
            <div class="mb-4"
                 data-controller="web-auth--webauthn-stimulus"
                 data-action="webauthn:assertion:success->ferienpass--admin-signin-login#rememberPasskey webauthn:assertion:failure->ferienpass--admin-signin-login#passkeyFailed webauthn:options:failure->ferienpass--admin-signin-login#passkeyFailed"
                 data-web-auth--webauthn-stimulus-request-options-url-value="/admin/assertion/options"
                 data-web-auth--webauthn-stimulus-request-result-url-value="/admin/assertion/result"
                 data-web-auth--webauthn-stimulus-request-success-redirect-uri-value="{{ successRedirect|default(path('admin_index')) }}">
                <button type="button" data-action="web-auth--webauthn-stimulus#signin"
                        class="group flex w-full items-center gap-3 rounded-lg border border-gray-300 bg-white px-4 py-3 text-left transition hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700">
                    <svg class="h-5 w-5 flex-none text-gray-700 group-hover:text-primary-600 dark:text-gray-200" 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 class="flex-1">
                        <span class="block text-sm font-semibold text-gray-800 dark:text-gray-100">{{ 'signIn.passkey.title'|trans }}</span>
                        <span class="block text-xs text-gray-500 dark:text-gray-400">{{ 'signIn.passkey.text'|trans }}</span>
                    </span>
                    <svg class="h-4 w-4 flex-none text-gray-400 transition group-hover:translate-x-0.5 group-hover:text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>
                </button>
            </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>

        {# Username (e-mail) — always present except in passkeyOnly view. #}
        <div {{ stimulus_target('ferienpass/admin-signin-login', 'emailBlock') }}>
            {{ form_label(login.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(login.username, { attr: stimulus_target('ferienpass/admin-signin-login', 'username').toArray()|merge({
                    'data-action': 'keydown.enter->ferienpass--admin-signin-login#enterEmail input->ferienpass--admin-signin-login#emailInput blur->ferienpass--admin-signin-login#validateEmail',
                    class: 'pl-10',
                    placeholder: 'name@beispiel.de',
                    autocomplete: 'username webauthn',
                }) }) }}
            </div>
            {{ form_errors(login.username) }}
        </div>

        {# Magic-link primary action + "use password instead" alternative.
           Always rendered — role-based disabling happens server-side at the
           request endpoint so the rendered HTML can't leak which e-mail
           addresses belong to ROLE_ADMIN users. #}
        <div class="mt-4 grid gap-2" {{ stimulus_target('ferienpass/admin-signin-login', 'magicActions') }}>
            <button type="button" disabled
                    {{ stimulus_target('ferienpass/admin-signin-login', 'magicButton') }}
                    {{ stimulus_action('ferienpass/admin-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.send'|trans }}
            </button>
            <button type="button" {{ stimulus_action('ferienpass/admin-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 inside the magic actions row — hidden in
               the passkey view since the fat passkey CTA above already covers
               that path. Shown otherwise so the user can switch to passkey
               from the magic / password flows. #}
            <div {{ stimulus_target('ferienpass/admin-signin-login', 'magicPasskeyAlt') }}
                 data-controller="web-auth--webauthn-stimulus"
                 data-action="webauthn:assertion:success->ferienpass--admin-signin-login#rememberPasskey webauthn:assertion:failure->ferienpass--admin-signin-login#passkeyFailed webauthn:options:failure->ferienpass--admin-signin-login#passkeyFailed"
                 data-web-auth--webauthn-stimulus-request-options-url-value="/admin/assertion/options"
                 data-web-auth--webauthn-stimulus-request-result-url-value="/admin/assertion/result"
                 data-web-auth--webauthn-stimulus-request-success-redirect-uri-value="{{ successRedirect|default(path('admin_index')) }}">
                <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>

        <div class="mt-4" style="display: none" {{ stimulus_target('ferienpass/admin-signin-login', 'magicSent') }}>
            <twig:Admin:Alert type="confirm">
                {{ 'signIn.magicLink.sent'|trans({}, 'admin') }}
            </twig:Admin:Alert>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">
                <button type="button" {{ stimulus_action('ferienpass/admin-signin-login', 'tryOtherEmail') }}
                        class="font-medium text-primary-600 hover:text-primary-500 focus:underline focus:outline-none dark:text-primary-400 dark:hover:text-primary-300">{{ 'signIn.magicLink.changeEmail'|trans }}</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 block — revealed on demand or shown upfront when the last
           method on this device was a password. #}
        <div style="display: none" {{ stimulus_target('ferienpass/admin-signin-login', 'passwordBlock') }}
             data-action="submit->ferienpass--admin-signin-login#rememberPassword">

            <div class="mt-4">
                {{ form_label(login.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(login.password, { attr: stimulus_target('ferienpass/admin-signin-login', 'password').toArray()|merge({
                        class: 'pl-10 pr-11',
                        placeholder: '••••••••',
                        autocomplete: 'current-password',
                    }) }) }}
                    <button type="button" {{ stimulus_action('ferienpass/admin-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/admin-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/admin-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(login.password) }}
            </div>

            <div class="mt-6 flex items-center justify-between">
                <div class="flex items-center">
                    {# `form_widget` does NOT resolve label_format — only
                       form_label / form_row do. Without the explicit `label`
                       here the core-bundle's checkbox_widget renders an empty
                       <label> tag (label variable is null), so the user sees
                       just a bare checkbox. Mirror the cms-bundle pattern and
                       pass the translated string in directly. #}
                    {{ form_widget(login.autologin, { label: 'login.autologin'|trans }) }}
                </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('admin_lost_password') }}">{{ 'login.forgotPassword'|trans }}</a>
                </div>
            </div>

            {# Anmelden — full-width. The base Tailwind styling (primary blue,
               padding, shadow) is added automatically by the core-bundle's
               `button_widget` form-theme override; we only need `w-full`
               here, matching the cms-bundle login template. #}
            <div class="mt-6">
                {{ form_widget(login.submit, { attr: { class: 'w-full' } }) }}
            </div>

            {# When the user used password last we still want passkey / magic-link easy to reach. #}
            <div class="mt-6">
                <div class="mb-4 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/admin-signin-login', 'magicButton') }}
                            {{ stimulus_action('ferienpass/admin-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.send'|trans }}
                    </button>

                    <div data-controller="web-auth--webauthn-stimulus"
                         data-action="webauthn:assertion:success->ferienpass--admin-signin-login#rememberPasskey"
                         data-web-auth--webauthn-stimulus-request-options-url-value="/admin/assertion/options"
                         data-web-auth--webauthn-stimulus-request-result-url-value="/admin/assertion/result">
                        <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(login) }}
    </div>

</div>

    {% if registrationHref|default %}
        <div class="mt-10 relative">
            <div class="absolute inset-0 flex items-center">
                <div class="w-full border-t border-gray-300"></div>
            </div>
            <div class="relative flex justify-center text-sm leading-5">
                <span class="px-2 bg-white text-gray-500">{{ 'login.noAccount'|trans }}</span>
            </div>
        </div>

        <div class="mt-8 relative text-center">
            <p class="text-sm mb-2 leading-5 text-gray-600 max-w">{{ 'login.noAccountText'|trans }}</p>
            <span class="inline-flex rounded-md shadow-sm">
                <a class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50 transition ease-in-out duration-150"
                   href="{{ registrationHref }}">
                    {{ 'login.registerHost'|trans }}
                </a>
            </span>
        </div>
    {% endif %}

{% endblock %}
