{% extends 'base.html' %}

{% block base_title %}Définir un nouveau mot de passe{% endblock %}

{% block content %}
<div class="auth-container">
    <h1>Définir un nouveau mot de passe</h1>
    
    {% if validlink %}
        <form method="post" novalidate>
            {% csrf_token %}
            
            {% if form.non_field_errors %}
            <div class="alert alert-danger">
                {% for error in form.non_field_errors %}
                    {{ error }}
                {% endfor %}
            </div>
            {% endif %}
            
            {% for field in form %}
            <div class="form-group">
                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field }}
                {% if field.errors %}
                <div class="field-errors">
                    {% for error in field.errors %}
                        <span class="error">{{ error }}</span>
                    {% endfor %}
                </div>
                {% endif %}
                {% if field.help_text %}
                <div class="help-text">{{ field.help_text }}</div>
                {% endif %}
            </div>
            {% endfor %}
            
            <button type="submit" class="btn btn-primary">Changer mon mot de passe</button>
        </form>
    {% else %}
        <div class="alert alert-danger">
            <p>Le lien de réinitialisation du mot de passe n'est pas valide, probablement parce qu'il a déjà été utilisé.</p>
            <p>Veuillez demander une nouvelle réinitialisation de mot de passe.</p>
        </div>
        
        <div class="auth-links">
            <a href="{% url 'user:password_reset' %}" class="btn btn-primary">Demander un nouveau lien</a>
        </div>
    {% endif %}
</div>

<style>
    .auth-container {
        max-width: 500px;
        margin: 2rem auto;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: bold;
    }
    
    input {
        width: 100%;
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    
    .field-errors {
        color: #dc3545;
        margin-top: 0.25rem;
    }
    
    .help-text {
        font-size: 0.875rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }
    
    .btn {
        display: inline-block;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        user-select: none;
        border: 1px solid transparent;
        padding: 0.5rem 1rem;
        font-size: 1rem;
        line-height: 1.5;
        border-radius: 0.25rem;
        cursor: pointer;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    }
    
    .btn-primary {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
        width: 100%;
        margin-top: 1rem;
    }
    
    .btn-primary:hover {
        background-color: #0069d9;
        border-color: #0062cc;
    }
    
    .auth-links {
        margin-top: 1.5rem;
        text-align: center;
    }
    
    .alert {
        padding: 0.75rem 1.25rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
    }
    
    .alert-danger {
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }
    
    .alert p {
        margin-bottom: 0.5rem;
    }
    
    .alert p:last-child {
        margin-bottom: 0;
    }
</style>
{% endblock %}