{# Wiederherstellungscode beim 2FA-Login – gleiches Theme wie TOTP #}
{% extends get_theme_base_template() %}


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


{% block base_content %}
    {{ parent() }}
    <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-amber-100">
                    <i class="bi bi-life-preserver text-3xl text-amber-600"></i>
                </div>
                <h1 class="text-2xl font-bold text-gray-900">
                    {{ 'admin.two_factor.recovery_login_title'|trans }}
                </h1>
                <p class="text-gray-500 text-sm mt-1">
                    {{ 'admin.two_factor.recovery_login_subtitle'|trans }}
                </p>
            </div>


            <!-- Warnung -->
            <div
                class="flex items-start gap-2 bg-amber-50 text-amber-700 px-4 py-3 rounded-lg mb-5 border border-amber-200"
                data-aos="fade-down"
            >
                <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-0.5"></i>
                <span class="text-sm">{{ 'admin.two_factor.recovery_login_warning'|trans }}</span>
            </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 %}


                <!-- Recovery-Code Eingabe -->
                <div class="mb-5">
                    <label for="_auth_code" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ 'admin.two_factor.recovery_code_label'|trans }}
                    </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-ticket-perforated"></i>
                        </span>
                        <input
                            id="_auth_code"
                            type="text"
                            name="{{ authCodeParameterName }}"
                            autocomplete="off"
                            spellcheck="false"
                            autocapitalize="characters"
                            maxlength="64"
                            autofocus
                            required
                            placeholder="XXXX-XXXX-XXXX"
                            class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-center tracking-[0.3em] text-base font-mono uppercase focus:ring-2 focus:ring-amber-500 focus:border-amber-500 placeholder-gray-300"
                        >
                    </div>
                    <p class="mt-2 text-xs text-gray-400 text-center">
                        <i class="bi bi-info-circle mr-1"></i>Jeden Code kannst du nur einmal verwenden.
                    </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-amber-600 border-gray-300 rounded focus:ring-amber-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-amber-600 hover:bg-amber-700 focus:ring-4 focus:ring-amber-300 transition"
                    data-aos="zoom-in"
                >
                    <i class="bi bi-shield-lock-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>
        document.addEventListener("DOMContentLoaded", function () {
            AOS.init();
        });
    </script>
{% endblock %}