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

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

{% block navigation %}{% endblock %}

{% block body %}
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary via-primary-dark to-primary p-4">
    <div class="w-full max-w-md">
        {# Flash сообщения #}
        {% include '_components/flash_messages.html.twig' %}
        
        {% for flash_error in app.flashes('reset_password_error') %}
            <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded mb-6">
                <p class="text-red-700 text-center">{{ flash_error }}</p>
            </div>
        {% endfor %}

        <div class="bg-white rounded-2xl shadow-2xl p-8 lg:p-12 border border-gray-100">
            {# Заголовок #}
            <div class="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-key text-2xl text-white"></i>
                </div>
                <h1 class="text-3xl font-bold text-primary mb-2">{{ 'lang.resetPassword'|trans }}</h1>
                <p class="text-gray-600">{{ 'lang.enterNewPassword'|trans|default('Please enter your new password') }}</p>
            </div>

            {# Форма #}
            {{ form_start(resetForm, {'attr': {'class': 'space-y-6'}}) }}
                
                {# Поле пароля #}
                <div>
                    {{ form_label(resetForm.plainPassword, null, {'label_attr': {'class': 'block text-sm font-semibold text-gray-700 mb-2 text-center'}}) }}
                    <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>
                        {{ form_widget(resetForm.plainPassword, {'attr': {
                            'class': 'w-full pl-11 pr-20 py-2.5 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',
                            'placeholder': 'lang.password'|trans
                        }}) }}
                        <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>
                    {% if resetForm.plainPassword.vars.errors|length > 0 %}
                        <div class="mt-1 text-sm text-red-500 text-center">
                            {% for error in resetForm.plainPassword.vars.errors %}
                                <div>{{ error.message }}</div>
                            {% endfor %}
                        </div>
                    {% endif %}
                </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">
                    <i class="fas fa-save mr-2"></i>
                    {{ 'lang.resetPassword'|trans }}
                </button>

                {# Ссылка на вход #}
                <div class="text-center pt-4 border-t border-gray-200">
                    <p class="text-sm text-gray-600 mb-2">{{ 'lang.rememberPassword'|trans|default('Remember your password?') }}</p>
                    <a href="{{ path('app_login') }}" 
                       class="inline-block text-sm text-secondary hover:text-secondary-light font-semibold transition-colors">
                        <i class="fas fa-arrow-left mr-2"></i>
                        {{ 'lang.backToLogin'|trans|default('Back to login') }}
                    </a>
                </div>

            {{ form_end(resetForm) }}
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const togglePassword = document.getElementById('toggle-password');
            const passwordInput = document.querySelector('input[type="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 %}