{# WebAuthn/Passkey als zweiter Faktor – gleiches Theme wie TOTP (Storefront) #}
{% extends get_theme_base_template() %}

{% block base_title %}{{ 'admin.two_factor.title'|trans }}{% endblock %}

{% block base_content %}
    <div class="min-h-screen flex items-center justify-center bg-gray-50 px-4 sm:px-6 lg:px-8">
        <div
            class="w-full max-w-md bg-white rounded-2xl shadow-xl p-8"
            data-aos="fade-up"
            data-aos-duration="800"
        >
            <!-- Header -->
            <div class="text-center mb-8">
                <div class="mx-auto mb-3 flex items-center justify-center h-16 w-16 rounded-full bg-blue-100">
                    <i class="bi bi-usb-symbol text-3xl text-blue-600"></i>
                </div>
                <h1 class="text-2xl font-bold text-gray-900">
                    {{ 'admin.two_factor.title'|trans }}
                </h1>
                <p class="text-gray-500 text-sm mt-1">
                    {{ 'admin.two_factor.passkey_login_hint'|trans }}
                </p>
            </div>


            <!-- HTTPS-Warnung -->
            {% if not app.request.secure and app.request.host not in ['localhost', '127.0.0.1'] %}
                <div
                    class="flex items-center gap-2 bg-yellow-50 text-yellow-700 px-4 py-3 rounded-lg mb-4 border border-yellow-200"
                    data-aos="fade-down"
                >
                    <i class="bi bi-shield-exclamation flex-shrink-0"></i>
                    <span>{{ 'admin.two_factor.passkey_https_warning'|trans }}</span>
                </div>
            {% endif %}


            <!-- Fehler-Anzeige -->
            {% if authenticationError %}
                <div
                    class="flex items-center gap-2 bg-red-50 text-red-700 px-4 py-3 rounded-lg mb-4 border border-red-200"
                    data-aos="fade-down"
                >
                    <i class="bi bi-exclamation-triangle-fill flex-shrink-0"></i>
                    <span>{{ authenticationError|trans(authenticationErrorData, 'SchebTwoFactorBundle') }}</span>
                </div>
            {% endif %}


            <!-- Provider-Auswahl (nur wenn mehrere verfügbar) -->
            {% if availableTwoFactorProviders|length > 1 %}
                <div class="mb-5">
                    <p class="text-sm text-gray-600 mb-2 font-medium">
                        {{ 'choose_provider'|trans({}, 'SchebTwoFactorBundle') }}:
                    </p>
                    <div class="flex flex-wrap gap-2">
                        {% for provider in availableTwoFactorProviders %}
                            <a
                                href="{{ path('2fa_login', {'preferProvider': provider}) }}"
                                class="px-3 py-1.5 text-xs font-semibold rounded-lg border border-blue-200 text-blue-600 hover:bg-blue-50 transition"
                            >
                                {{ ('admin.two_factor.provider_' ~ provider)|trans }}
                            </a>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}


            <!-- Browser-Hinweis -->
            <div class="flex items-start gap-3 bg-blue-50 border border-blue-100 rounded-lg px-4 py-3 mb-5">
                <i class="bi bi-info-circle-fill text-blue-400 mt-0.5 flex-shrink-0"></i>
                <p class="text-sm text-blue-700 leading-snug">
                    {{ 'admin.two_factor.passkey_follow_browser'|trans }}
                </p>
            </div>


            <!-- Formular -->
            <form
                action="{{ checkPathUrl ? checkPathUrl : path(checkPathRoute) }}"
                method="post"
                novalidate
                data-webauthn-tfa-action="authenticate"
                data-webauthn-tfa-data="{{ webauthn_request_data|e('html_attr') }}"
            >
                <input type="hidden" name="{{ authCodeParameterName }}" id="_auth_code" value="" autocomplete="off">


                {% if isCsrfProtectionEnabled %}
                    <input type="hidden" name="{{ csrfParameterName }}" value="{{ csrf_token(csrfTokenId) }}">
                {% endif %}


                <!-- Gerät merken -->
                {% if displayTrustedOption %}
                    <div class="flex items-center mb-5">
                        <input
                            id="_trusted"
                            type="checkbox"
                            name="{{ trustedParameterName }}"
                            class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                        >
                        <label for="_trusted" class="ml-2 block text-sm text-gray-700">
                            {{ 'trusted'|trans({}, 'SchebTwoFactorBundle') }}
                        </label>
                    </div>
                {% endif %}


                <!-- Submit-Hinweis -->
                <p class="text-xs text-gray-400 text-center mb-3">
                    <i class="bi bi-fingerprint mr-1"></i>
                    {{ 'admin.two_factor.passkey_submit_hint'|trans }}
                </p>


                <!-- Submit -->
                <button
                    type="submit"
                    class="w-full flex justify-center items-center gap-2 py-2 px-4 text-sm font-semibold rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:ring-blue-300 transition"
                    data-aos="zoom-in"
                >
                    <i class="bi bi-key-fill"></i>
                    <span>{{ 'login'|trans({}, 'SchebTwoFactorBundle') }}</span>
                </button>
            </form>


            <!-- Abbrechen -->
            <p class="mt-5 text-center text-sm text-gray-500">
                <a
                    href="{{ logoutPath }}"
                    class="inline-flex items-center gap-1 text-blue-600 hover:text-blue-700 transition"
                >
                    <i class="bi bi-arrow-left text-xs"></i>
                    {{ 'cancel'|trans({}, 'SchebTwoFactorBundle') }}</a>
            </p>
        </div>
    </div>


    <script src="/js/tfa_webauthn.js" defer></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            AOS.init();
        });
    </script>
{% endblock %}