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

{% block title %}{{ 'security.reset_password.title'|trans }} - {{ 'app.name'|trans }}{% endblock %}

{% block body %}
<div class="container-fluid vh-100">
    <div class="row h-100">
        <!-- Section gauche avec image -->
        <div class="col-lg-6 d-none d-lg-block p-0">
            <div class="h-100 d-flex align-items-center justify-content-center" 
                 style="background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);">
                <div class="text-center text-white">
                    <i class="fas fa-lock fa-5x mb-4"></i>
                    <h2 class="mb-3">{{ 'security.reset_password.title'|trans }}</h2>
                    <p class="lead">{{ 'security.reset_password.subtitle'|trans }}</p>
                </div>
            </div>
        </div>

        <!-- Section droite avec formulaire -->
        <div class="col-lg-6 d-flex align-items-center justify-content-center">
            <div class="w-100" style="max-width: 400px;">
                <div class="text-center mb-4">
                    <h1 class="h3 mb-3 fw-normal">{{ 'security.reset_password.heading'|trans }}</h1>
                    <p class="text-muted">{{ 'security.reset_password.description'|trans }}</p>
                </div>

                <!-- Messages flash -->
                {% for type, messages in app.flashes %}
                    {% for message in messages %}
                        <div class="alert alert-{{ type == 'error' ? 'danger' : type }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}
                {% endfor %}

                {{ form_start(resetForm) }}
                    <div class="form-floating mb-3">
                        {{ form_widget(resetForm.plainPassword.first, {
                            'attr': {
                                'class': 'form-control',
                                'placeholder': 'security.reset_password.password_placeholder'|trans
                            }
                        }) }}
                        {{ form_label(resetForm.plainPassword.first, null, {
                            'label_attr': {'class': ''}
                        }) }}
                        {{ form_errors(resetForm.plainPassword.first) }}
                    </div>

                    <div class="form-floating mb-3">
                        {{ form_widget(resetForm.plainPassword.second, {
                            'attr': {
                                'class': 'form-control',
                                'placeholder': 'security.change_password.confirm_password'|trans
                            }
                        }) }}
                        {{ form_label(resetForm.plainPassword.second, null, {
                            'label_attr': {'class': ''}
                        }) }}
                        {{ form_errors(resetForm.plainPassword.second) }}
                    </div>

                    <!-- Indicateur de force du mot de passe -->
                    <div class="mb-3">
                        <div class="password-strength">
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar" id="passwordStrength" role="progressbar" style="width: 0%"></div>
                            </div>
                            <small class="text-muted" id="passwordStrengthText">{{ 'security.reset_password.password_placeholder'|trans }}</small>
                        </div>
                    </div>

                    <div class="mb-3">
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ 'security.reset_password.password_requirements'|trans }}
                        </small>
                    </div>

                    {{ form_widget(resetForm.submit, {
                        'attr': {'class': 'btn btn-danger w-100 py-2 mb-3'}
                    }) }}

                    <div class="text-center">
                        <a href="{{ path('app_login', {'_locale': app.request.locale}) }}" class="text-decoration-none">
                            <i class="fas fa-arrow-left me-1"></i>{{ 'security.reset_password.back_to_login'|trans }}
                        </a>
                    </div>
                {{ form_end(resetForm) }}
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const passwordInput = document.querySelector('input[type="password"]');
    const strengthBar = document.getElementById('passwordStrength');
    const strengthText = document.getElementById('passwordStrengthText');

    if (passwordInput) {
        passwordInput.addEventListener('input', function() {
            const password = this.value;
            const strength = calculatePasswordStrength(password);
            
            strengthBar.style.width = strength.percentage + '%';
            strengthBar.className = 'progress-bar ' + strength.class;
            strengthText.textContent = strength.text;
        });
    }

    function calculatePasswordStrength(password) {
        let score = 0;
        
        if (password.length >= 8) score += 25;
        if (password.length >= 12) score += 25;
        if (/[a-z]/.test(password)) score += 10;
        if (/[A-Z]/.test(password)) score += 10;
        if (/[0-9]/.test(password)) score += 15;
        if (/[^A-Za-z0-9]/.test(password)) score += 15;
        
        if (score < 30) {
            return { percentage: score, class: 'bg-danger', text: '{{ 'security.password_strength.weak'|trans }}' };
        } else if (score < 60) {
            return { percentage: score, class: 'bg-warning', text: '{{ 'security.password_strength.medium'|trans }}' };
        } else if (score < 90) {
            return { percentage: score, class: 'bg-info', text: '{{ 'security.password_strength.good'|trans }}' };
        } else {
            return { percentage: score, class: 'bg-success', text: '{{ 'security.password_strength.excellent'|trans }}' };
        }
    }
});
</script>
{% endblock %}