{% trans_default_domain 'admin' %}
{% set c = 'ferienpass/admin-account-passkey' %}

<div {{ attributes.defaults({ class: 'overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800' }) }}
     data-controller="ferienpass--admin-account-passkey web-auth--webauthn-stimulus"
     data-action="webauthn:attestation:success->ferienpass--admin-account-passkey#reload"
     data-web-auth--webauthn-stimulus-creation-options-url-value="/admin/passkey/options"
     data-web-auth--webauthn-stimulus-creation-result-url-value="/admin/passkey/result"
     data-ferienpass--admin-account-passkey-name-url-value="{{ path('admin_security_passkey_name') }}">

    <div class="p-6">

        {% if passwordless %}
            <twig:Admin:Alert type="confirm" class="mb-4">
                <strong class="font-semibold">Ihr Konto ist passwortlos.</strong>
                Sie melden sich ausschließlich mit Passkey oder Anmeldelink an.
            </twig:Admin:Alert>
        {% endif %}

        {% if passkeys is empty %}
            <div class="rounded-lg border-2 border-dashed border-gray-200 px-6 py-10 text-center dark:border-gray-700">
                <span class="inline-flex size-12 rounded-full bg-gray-100 text-gray-400 items-center justify-center mb-3 dark:bg-gray-700 dark:text-gray-500">
                    <twig:ux:icon name="ph:key" class="size-6" />
                </span>
                <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ 'userAccount.passkeys.empty'|trans }}</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400 max-w-sm mx-auto">{{ 'userAccount.passkeys.emptyHint'|trans }}</p>
            </div>
        {% else %}
            <ul class="divide-y divide-gray-100 -my-1 dark:divide-gray-700">
                {% for pk in passkeys %}
                    <li class="flex items-center gap-4 py-3">
                        <span class="size-10 rounded-lg bg-primary-50 text-primary-700 flex items-center justify-center shrink-0 dark:bg-primary-500/10 dark:text-primary-400">
                            <twig:ux:icon name="ph:device-mobile" class="size-5" />
                        </span>
                        <div class="min-w-0 flex-1">
                            <p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">
                                {{ pk.name|default('') ?: 'userAccount.passkeys.unnamed'|trans }}
                            </p>
                            <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">{{ 'userAccount.passkeys.created'|trans({ date: pk.createdAt|date('d.m.Y') }) }}</p>
                        </div>
                        <form method="post" action="{{ path('admin_security_passkey_delete', { id: pk.getId }) }}" class="shrink-0">
                            <input type="hidden" name="_token" value="{{ csrf_token('submit') }}">
                            {# Delete button is disabled when removing it would leave the user with neither
                               a password nor any passkey. The endpoint re-checks this server-side. #}
                            <button type="submit" {{ (passkeys|length <= 1 and passwordless) ? 'disabled' : '' }}
                                    class="inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 transition hover:border-red-300 hover:bg-red-50 hover:text-red-700 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-gray-300 disabled:hover:bg-white disabled:hover:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-red-500/10">
                                <twig:ux:icon name="ph:trash" class="size-3.5" />
                                {{ 'userAccount.passkeys.remove'|trans }}
                            </button>
                        </form>
                    </li>
                {% endfor %}
            </ul>

            {% if passkeys|length == 1 and passwordless %}
                <div class="mt-4 flex items-start gap-2 rounded-lg bg-gray-50 px-3 py-2.5 text-xs leading-relaxed text-gray-600 dark:bg-gray-700/40 dark:text-gray-300">
                    <twig:ux:icon name="ph:lock-key" class="mt-0.5 size-3.5 flex-none" />
                    {{ 'userAccount.passkeys.lastHint'|trans }}
                </div>
            {% endif %}
        {% endif %}

    </div>

    <div class="flex items-center justify-between gap-3 flex-wrap border-t border-gray-200 bg-gray-50/60 px-6 py-3 dark:border-gray-700 dark:bg-gray-800/60">
        <span class="hidden items-center gap-1.5 text-xs text-gray-500 sm:flex dark:text-gray-400">
            <twig:ux:icon name="ph:shield-check" class="size-4 text-emerald-500" />
            {{ 'userAccount.passkeys.securityNote'|trans }}
        </span>
        <twig:Admin:Button
                variant="dark"
                size="sm"
                data-action="ferienpass--admin-account-passkey#open">
            <twig:ux:icon name="ph:plus" class="size-4 mr-1.5" />
            Passkey hinzufügen
        </twig:Admin:Button>
    </div>

    {# Hidden trigger for the WebAuthn creation ceremony, fired after the name is stored. #}
    <button type="button" hidden {{ stimulus_target(c, 'webauthnButton') }} data-action="web-auth--webauthn-stimulus#signup"></button>

    {# Name-your-passkey modal. #}
    <div {{ stimulus_target(c, 'modal') }} style="display: none"
         class="fixed inset-0 z-50 items-center justify-center bg-gray-900/50 p-4 backdrop-blur-sm">
        <div class="w-full max-w-md rounded-2xl border border-gray-200 bg-white p-6 shadow-xl dark:border-gray-700 dark:bg-gray-800">
            <div class="mb-4 grid h-11 w-11 place-items-center rounded-xl bg-primary-600 text-white">
                <twig:ux:icon name="ph:key" class="size-5" />
            </div>
            <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ 'userAccount.passkeys.modalTitle'|trans }}</h3>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ 'userAccount.passkeys.modalText'|trans }}</p>

            <div class="mt-4">
                <label for="pk-name" class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">{{ 'userAccount.passkeys.nameLabel'|trans }}</label>
                <input id="pk-name" type="text" {{ stimulus_target(c, 'name') }} maxlength="64"
                       placeholder="{{ 'userAccount.passkeys.namePlaceholder'|trans }}"
                       class="block w-full rounded-md border-0 py-2 px-3 text-sm text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:bg-gray-900 dark:text-gray-100 dark:ring-gray-700">
            </div>

            <div class="mt-6 flex justify-end gap-3">
                <button type="button" {{ stimulus_action(c, 'close') }}
                        class="inline-flex items-center justify-center font-semibold rounded-md px-3 py-2 text-sm bg-white text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-400 transition-colors dark:bg-white/5 dark:text-white dark:ring-white/10 dark:hover:bg-white/10">
                    {{ 'userAccount.passkeys.cancel'|trans }}
                </button>
                <button type="button" {{ stimulus_action(c, 'create') }}
                        class="inline-flex items-center justify-center gap-1.5 font-semibold rounded-md px-3 py-2 text-sm bg-primary-600 text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 transition-colors">
                    <twig:ux:icon name="ph:key" class="size-4" />
                    {{ 'userAccount.passkeys.create'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>
