{# TOTP-Eingabe nach Passwort-Login #}
{% extends get_theme_base_template() %}

{% block base_title %}Zwei-Faktor-Authentifizierung{% 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-phone-fill 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.subtitle'|trans }}
                </p>
            </div>

            <!-- 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 %}

            <!-- Formular -->
            <form
                action="{{ checkPathUrl ? checkPathUrl : path(checkPathRoute) }}"
                method="post"
                novalidate
            >
                {% if isCsrfProtectionEnabled %}
                    <input type="hidden" name="{{ csrfParameterName }}" value="{{ csrf_token(csrfTokenId) }}">
                {% endif %}

                <!-- Auth-Code Eingabe -->
                <div class="mb-5">
                    <label for="_auth_code" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ 'auth_code'|trans({}, 'SchebTwoFactorBundle') }}
                        <span class="ml-1 text-xs text-gray-400 font-normal">({{ twoFactorProvider }})</span>
                    </label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400 pointer-events-none">
                            <i class="bi bi-123"></i>
                        </span>
                        <input
                            id="_auth_code"
                            type="text"
                            name="{{ authCodeParameterName }}"
                            autocomplete="one-time-code"
                            inputmode="numeric"
                            pattern="[0-9]*"
                            maxlength="12"
                            autofocus
                            required
                            placeholder="000000"
                            class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-center tracking-[0.4em] text-lg font-mono focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-gray-300"
                        >
                    </div>
                    <p class="mt-2 text-xs text-gray-400 text-center">
                        <i class="bi bi-clock mr-1"></i>Der Code ist nur kurze Zeit gültig.
                    </p>
                </div>

                <!-- Gerät merken -->
                {% if displayTrustedOption %}
                    <div class="flex items-center mb-6">
                        <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 -->
                <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-shield-check"></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>
        document.addEventListener("DOMContentLoaded", function () {
            AOS.init();
        });
    </script>
{% endblock %}