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

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

{% block footer %}{% 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 items-center justify-center">
        <div class="relative z-10 text-center text-white max-w-md px-12">
            <h1 class="text-4xl font-bold mb-4">{{ 'lang.Login'|trans }}</h1>
            <p class="text-xl mb-8 text-white text-opacity-90">{{ 'lang.welcomeBack'|trans }}</p>
            <div class="space-y-4">
                <div class="flex items-center space-x-3">
                    <i class="fas fa-check text-secondary text-base"></i>
                    <span class="text-white text-opacity-90">{{ 'lang.secureLogin'|trans }}</span>
                </div>
                <div class="flex items-center space-x-3">
                    <i class="fas fa-check text-secondary text-base"></i>
                    <span class="text-white text-opacity-90">{{ 'lang.quickAccess'|trans }}</span>
                </div>
                <div class="flex items-center space-x-3">
                    <i class="fas fa-check text-secondary text-base"></i>
                    <span class="text-white text-opacity-90">{{ 'lang.privacyProtection'|trans }}</span>
                </div>
            </div>
            <div class="mt-12 pt-8 border-t border-white border-opacity-20">
                <p class="text-white text-opacity-80 mb-4">{{ 'lang.noAccountYet'|trans }}</p>
                <a href="{{ path('app_register') }}" class="inline-flex items-center px-6 py-2 bg-secondary hover:bg-secondary-light text-white font-semibold rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
                    <span>{{ 'lang.orRegister'|trans }}</span>
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </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-6 py-3 bg-primary text-white rounded-full hover:bg-primary-light transition-colors">
                        {{ 'lang.Logout'|trans }}
                    </a>
                </div>
            {% else %}
                {# Мобильная версия заголовка #}
                <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.5 px-4 bg-primary hover:bg-primary-light text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-[1.01] shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 text-sm">
                        {{ 'lang.signIn'|trans }}
                    </button>

                    {# Дополнительные ссылки #}
                    <div class="text-center space-y-2">
                        <a href="{{ path('app_forgot_password_request') }}" 
                           class="block text-sm text-primary hover:text-primary-light font-medium transition-colors">
                            {{ 'lang.forgotPassword'|trans }}
                        </a>
                        <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 %}