{% extends '@Contao/fragment/_container.html.twig' %}

{% block container %}
    {{ block('content') }}
{% endblock %}

{% block content %}

    <div class="mx-auto max-w-[720px] py-10 lg:py-14">

        {% include '@Contao/fragment/onboarding/_stepper.html.twig' with { current: 1 } only %}

        {% include '@Contao/fragment/onboarding/_page_head.html.twig' with {
            kicker: 'onboarding.passkey.kicker'|trans({}, 'cms'),
            title: 'onboarding.passkey.title'|trans({}, 'cms'),
            lede: 'onboarding.passkey.lede'|trans({}, 'cms'),
        } only %}

        {# Create a passkey for the authenticated member (CurrentUserEntityGuesser).
           This step is mandatory: a passkey-only account has no other way to sign in. #}
        <div class="overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
             data-controller="web-auth--webauthn-stimulus"
             data-web-auth--webauthn-stimulus-creation-options-url-value="/passkey/options"
             data-web-auth--webauthn-stimulus-creation-result-url-value="/passkey/result"
             data-web-auth--webauthn-stimulus-creation-success-redirect-uri-value="{{ path('cms_registration_welcome') }}"
             x-data="{ pk: 'idle' }"
             @webauthn:attestation:failure="pk = 'error'"
             @webauthn:authenticator:response="pk = 'creating'">

            <div class="flex items-start gap-4 px-6 py-6">
                <div class="grid h-12 w-12 flex-none place-items-center rounded-xl bg-gray-900 text-white dark:bg-gray-700">
                    <svg class="h-6 w-6" 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>
                </div>
                <div class="min-w-0 flex-1">
                    <h2 class="text-base font-bold text-gray-900 dark:text-white">{{ 'onboarding.passkey.cardTitle'|trans({}, 'cms') }}</h2>
                    <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">{{ 'onboarding.passkey.text'|trans({}, 'cms') }}</p>

                    <button type="button"
                            data-action="web-auth--webauthn-stimulus#signup"
                            @click="pk = 'creating'"
                            class="mt-4 inline-flex items-center gap-2 rounded-md bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white hover:bg-gray-800 focus:outline-none dark:bg-gray-700 dark:hover:bg-gray-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"><circle cx="8" cy="12" r="4"/><path d="M12 12h10"/><path d="M18 12v3"/><path d="M22 12v2"/></svg>
                        {{ 'onboarding.passkey.button'|trans({}, 'cms') }}
                    </button>

                    <p x-show="pk === 'creating'" x-cloak class="mt-3 text-sm text-gray-600 dark:text-gray-300">{{ 'onboarding.passkey.creating'|trans({}, 'cms') }}</p>
                    <p x-show="pk === 'error'" x-cloak class="mt-3 text-sm font-medium text-red-700 dark:text-red-400">{{ 'onboarding.passkey.error'|trans({}, 'cms') }}</p>
                </div>
            </div>
        </div>

    </div>

{% endblock %}
