{% extends 'account/base_account.html.twig' %}

{% block title %}Changer mon mot de passe{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">🔒 Changer mon mot de passe</h1>
    <p class="page-subtitle">Modifiez votre mot de passe de connexion</p>
</div>

<div class="card max-w-sm">
    {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
    
    <div class="form-group">
        {{ form_label(form.currentPassword) }}
        {{ form_widget(form.currentPassword) }}
        {{ form_errors(form.currentPassword) }}
    </div>

    <hr class="form-divider">

    <div class="form-group">
        {{ form_label(form.newPassword.first) }}
        {{ form_widget(form.newPassword.first) }}
        {{ form_errors(form.newPassword.first) }}
        <span class="form-hint">Minimum 8 caractères</span>
    </div>

    <div class="form-group">
        {{ form_label(form.newPassword.second) }}
        {{ form_widget(form.newPassword.second) }}
        {{ form_errors(form.newPassword.second) }}
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">
            🔐 Modifier le mot de passe
        </button>
        <a href="{{ path('app_account_profil') }}" class="btn btn-secondary">
            Annuler
        </a>
    </div>

    {{ form_end(form) }}
</div>

<!-- CONSEILS SÉCURITÉ -->
<div class="card max-w-sm mt-3">
    <div class="card-title">💡 Conseils de sécurité</div>
    
    <ul class="tips-list">
        <li>
            <span class="check">✓</span>
            <span>Utilisez au moins 8 caractères</span>
        </li>
        <li>
            <span class="check">✓</span>
            <span>Mélangez lettres majuscules et minuscules</span>
        </li>
        <li>
            <span class="check">✓</span>
            <span>Ajoutez des chiffres et caractères spéciaux</span>
        </li>
        <li>
            <span class="check">✓</span>
            <span>N'utilisez pas le même mot de passe ailleurs</span>
        </li>
    </ul>
</div>
{% endblock %}