{% extends 'base.html.twig' %}

{% block title %}{{ 'lang.Login'|trans }}{% endblock %}

{% block navigation %}{% endblock %}


{% block body %}
<div class="min-h-screen flex">
    {# Левая часть — информационная панель #}
    <div class="hidden lg:flex lg:w-1/2 h-screen bg-gradient-to-br from-primary via-primary-dark to-primary relative overflow-hidden">
        {% include '_components/auth_left_panel.html.twig' with {
            lead_key: 'lang.authLoginLead',
            lead2_key: 'lang.authLoginLead2',
            benefits: ['lang.authLoginBenefit1', 'lang.authLoginBenefit2', 'lang.authLoginBenefit3', 'lang.authLoginBenefit4'],
            benefit_icons: ['fa-database', 'fa-mobile-alt', 'fa-share-alt', 'fa-gift'],
            cta_teaser_key: 'lang.noAccountYet',
            cta_label_key: 'lang.orRegister',
            cta_url: path('app_register'),
            cta_icon: 'fa-arrow-right'
        } %}
    </div>

    {# Правая часть - форма входа #}
    <div class="w-full lg:w-1/2 flex items-center justify-center bg-white p-8 lg:p-12 overflow-y-auto h-screen">
        <div class="w-full max-w-md">
            {% if app.user %}
                <div class="text-center">
                    <h1 class="text-2xl font-bold text-primary mb-4">
                        {{ 'lang.loggedInAs'|trans }} {{ app.user.userIdentifier }}
                    </h1>
                    <a href="{{ path('app_logout') }}" class="inline-block px-4 py-2 bg-primary text-white text-sm font-medium rounded-lg hover:bg-primary-light transition-colors">
                        {{ 'lang.Logout'|trans }}
                    </a>
                </div>
            {% else %}
                {# Заголовок: на десктопе — слева в блоке формы, на мобиле — с иконкой #}
                <div class="hidden lg:block mb-8">
                    <h1 class="text-3xl font-bold text-primary mb-2">{{ 'lang.Login'|trans }}</h1>
                    <p class="text-gray-600">{{ 'lang.enterYourAccount'|trans }}</p>
                </div>
                <div class="lg:hidden text-center mb-8">
                    <div class="inline-flex items-center justify-center w-16 h-16 bg-primary rounded-full mb-4">
                        <i class="fas fa-user text-2xl text-white"></i>
                    </div>
                    <h1 class="text-3xl font-bold text-primary mb-2">{{ 'lang.Login'|trans }}</h1>
                    <p class="text-gray-600">{{ 'lang.enterYourAccount'|trans }}</p>
                </div>

                {# Flash сообщения #}
                {% include '_components/flash_messages.html.twig' %}

                <form method="post" class="space-y-6">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

                    {% if error %}
                        <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded">
                            <p class="text-red-700">{{ error.messageKey|trans(error.messageData, 'security') }}</p>
                        </div>
                    {% endif %}

                    {# Email поле #}
                    <div>
                        <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
                            {{ 'lang.email'|trans }}
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                                <i class="icofont icofont-ui-email text-gray-400 text-sm"></i>
                            </div>
                            <input type="email"
                                   id="email"
                                   name="email"
                                   required="required"
                                   placeholder="{{ 'email'|trans }}"
                                   class="w-full pl-11 pr-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 placeholder-gray-400 text-sm">
                        </div>
                    </div>

                    {# Password поле #}
                    <div>
                        <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">
                            {{ 'lang.password'|trans }}
                        </label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3.5 flex items-center pointer-events-none">
                                <i class="icofont icofont-ui-password text-gray-400 text-sm"></i>
                            </div>
                            <input type="password"
                                   id="password"
                                   name="password"
                                   required="required"
                                   placeholder="{{ 'lang.password'|trans }}"
                                   class="w-full pl-11 pr-20 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all duration-200 text-gray-900 placeholder-gray-400 text-sm">
                            <button type="button" 
                                    id="toggle-password"
                                    class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm text-gray-500 hover:text-secondary transition-colors font-medium bg-transparent border-0 outline-none cursor-pointer">
                                <span id="show-pw-text">{{ 'lang.show'|trans }}</span>
                                <span id="hide-pw-text" class="hidden">{{ 'lang.hide'|trans }}</span>
                            </button>
                        </div>
                    </div>

                    {# Remember me #}
                    <div class="flex items-center">
                        <input type="checkbox"
                               id="_remember_me"
                               name="_remember_me"
                               class="w-5 h-5 text-secondary border-gray-300 rounded focus:ring-secondary focus:ring-2"
                               value="1">
                        <label for="_remember_me" class="ml-3 text-sm text-gray-700">
                            {{ 'lang.rememberMe'|trans }}
                        </label>
                    </div>

                    {# Кнопка входа #}
                    <button type="submit"
                            class="w-full py-2 px-4 bg-primary hover:bg-primary-light text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2">
                        {{ 'lang.signIn'|trans }}
                    </button>

                    {# Дополнительные ссылки #}
                    <div class="text-center space-y-2">
                        <div class="flex items-center justify-between">
                            <a href="{{ path('app_forgot_password_request') }}" 
                               class="text-sm text-primary hover:text-primary-light font-medium transition-colors">
                                {{ 'lang.forgotPassword'|trans }}
                            </a>
                            <a href="{{ path('app_register') }}" 
                               class="text-sm text-primary hover:text-primary-light font-medium transition-colors">
                                {{ 'lang.signUp'|trans }}
                            </a>
                        </div>
                        <div class="lg:hidden pt-4 border-t border-gray-200">
                            <p class="text-sm text-gray-600 mb-2">{{ 'lang.noAccountYet'|trans }}</p>
                            <a href="{{ path('app_register') }}" 
                               class="inline-block text-sm text-secondary hover:text-secondary-light font-semibold">
                                {{ 'lang.orRegister'|trans }}
                            </a>
                        </div>
                    </div>
                </form>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('login') }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const togglePassword = document.getElementById('toggle-password');
            const passwordInput = document.getElementById('password');
            const showPwText = document.getElementById('show-pw-text');
            const hidePwText = document.getElementById('hide-pw-text');
            
            if (togglePassword && passwordInput) {
                togglePassword.addEventListener('click', function() {
                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    passwordInput.setAttribute('type', type);
                    
                    if (type === 'password') {
                        showPwText.classList.remove('hidden');
                        hidePwText.classList.add('hidden');
                    } else {
                        showPwText.classList.add('hidden');
                        hidePwText.classList.remove('hidden');
                    }
                });
            }
        });
    </script>
{% endblock %}