{% extends get_theme_base_template() %}

{% block base_title %}Login{% endblock %}

{% block base_content %}
    {% set settings = get_settings() %}
    {% set loginMode = settings.loginIdentifierMode %}
    {% set identifierLabel = loginMode == 'email' ? 'E-Mail-Adresse' : (loginMode == 'username' ? 'Benutzername' : 'Benutzername oder E-Mail') %}
    {% set identifierPlaceholder = loginMode == 'email' ? 'ihre@email.de' : (loginMode == 'username' ? 'Ihr Benutzername' : 'Benutzername oder E-Mail') %}
    {% set identifierType = loginMode == 'email' ? 'email' : 'text' %}
    {% set identifierIcon = loginMode == 'email' ? 'fas fa-envelope' : 'fas fa-user' %}

    <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="fas fa-lock text-3xl text-blue-600"></i>
                </div>
                <h1 class="text-2xl font-bold text-gray-900">Willkommen zurück</h1>
                <p class="text-gray-500 text-sm mt-1">Bitte melde dich mit deinen Zugangsdaten an.</p>
            </div>

            {# Fehler-Anzeige #}
            {% if error %}
                <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="fas fa-exclamation-triangle flex-shrink-0"></i>
                    <span>{{ error.messageKey|trans(error.messageData, 'security') }}</span>
                </div>
            {% endif %}

            {# Formular #}
            <form action="{{ path('app_storefront_login') }}" method="post" novalidate>
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                {# Identifier-Feld #}
                <div class="mb-5">
                    <label for="login_identifier" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ identifierLabel }}
                    </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="{{ identifierIcon }}"></i>
                        </span>
                        <input
                            type="{{ identifierType }}"
                            id="login_identifier"
                            name="_username"
                            value="{{ last_username }}"
                            autocomplete="{{ loginMode == 'email' ? 'email' : 'username' }}"
                            placeholder="{{ identifierPlaceholder }}"
                            required
                            class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-gray-300"
                        >
                    </div>
                </div>

                {# Passwort-Feld #}
                <div class="mb-5">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                        Passwort
                    </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="fas fa-key"></i>
                        </span>
                        <input
                            type="password"
                            id="password"
                            name="_password"
                            autocomplete="current-password"
                            required
                            class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 placeholder-gray-300"
                        >
                    </div>
                </div>

                {# Remember Me + Passwort vergessen #}
                <div class="flex items-center justify-between mb-4">
                    {% if settings.allowRememberMeOnLogin %}
                        <div class="flex items-center">
                            <input
                                id="remember_me"
                                type="checkbox"
                                name="_remember_me"
                                class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                            >
                            <label for="remember_me" class="ml-2 block text-sm text-gray-700">
                                Angemeldet bleiben
                            </label>
                        </div>
                    {% else %}
                        <span></span>
                    {% endif %}

                    {% if settings.allowPasswordReset %}
                        <a
                            href="{{ path('app_forgot_password') }}"
                            class="text-sm text-blue-600 hover:text-blue-700 transition"
                        >
                            Passwort vergessen?
                        </a>
                    {% endif %}
                </div>

                {# Friendly Captcha wie im Original #}
                {% include '@TerraFlowCMS/partials/friendly_captcha_widget.html.twig' with { captcha_context: 'login' } %}

                {# Submit #}
                <button
                    type="submit"
                    class="mt-3 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="fas fa-right-to-bracket"></i>
                    <span>Jetzt anmelden</span>
                </button>
            </form>

            {# OAuth-Buttons im neuen Layout #}
            {% if oauth_providers is defined and oauth_providers|length > 0 %}
                <div class="mt-6 pt-4 border-t border-gray-200">
                    <p class="text-center text-gray-400 text-xs mb-3">
                        {{ 'storefront.oauth.or_continue'|trans }}
                    </p>
                    <div class="flex flex-col gap-3">
                        {% for p in oauth_providers %}
                            <a
                                href="{{ path('storefront_oauth_connect', { slug: p.slug }) }}"
                                class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 hover:border-gray-400 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1"
                            >
                                {% if p.iconClass %}
                                    {# iconClass sollte bereits vollständige FA-Klassen enthalten, z.B. 'fab fa-google' #}
                                    <i class="{{ p.iconClass }}" aria-hidden="true"></i>
                                {% endif %}
                                <span>
                                    {{ 'storefront.oauth.continue_with'|trans({ '%name%': p.displayName }) }}
                                </span>
                            </a>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

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