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

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

{% block body %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="fas fa-key me-2"></i>{{ 'security.change_password.title'|trans }}
                    </h4>
                </div>
                <div class="card-body">
                    <!-- 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 method="post">
                        <div class="mb-3">
                            <label for="current_password" class="form-label">{{ 'security.change_password.current_password'|trans }}</label>
                            <input type="password" 
                                   class="form-control" 
                                   id="current_password" 
                                   name="current_password" 
                                   required>
                        </div>

                        <div class="mb-3">
                            <label for="new_password" class="form-label">{{ 'security.change_password.new_password'|trans }}</label>
                            <input type="password" 
                                   class="form-control" 
                                   id="new_password" 
                                   name="new_password" 
                                   required>
                            
                            <!-- Indicateur de force du mot de passe -->
                            <div class="mt-2">
                                <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.change_password.new_password_placeholder'|trans }}</small>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="confirm_password" class="form-label">{{ 'security.change_password.confirm_password'|trans }}</label>
                            <input type="password" 
                                   class="form-control" 
                                   id="confirm_password" 
                                   name="confirm_password" 
                                   required>
                        </div>

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

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>{{ 'security.change_password.title'|trans }}
                            </button>
                            <a href="{{ path('app_dashboard') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-arrow-left me-2"></i>{{ 'security.change_password.back_to_dashboard'|trans }}
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const newPasswordInput = document.getElementById('new_password');
    const confirmPasswordInput = document.getElementById('confirm_password');
    const strengthBar = document.getElementById('passwordStrength');
    const strengthText = document.getElementById('passwordStrengthText');

    newPasswordInput.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;
    });

    // Vérification de la correspondance des mots de passe
    function checkPasswordMatch() {
        const newPassword = newPasswordInput.value;
        const confirmPassword = confirmPasswordInput.value;
        
        if (confirmPassword && newPassword !== confirmPassword) {
            confirmPasswordInput.setCustomValidity('{{ 'security.password_mismatch'|trans }}');
        } else {
            confirmPasswordInput.setCustomValidity('');
        }
    }

    newPasswordInput.addEventListener('input', checkPasswordMatch);
    confirmPasswordInput.addEventListener('input', checkPasswordMatch);

    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 %}