{% extends "base.html" %}

{% block title %}Set New Password - Mimir{% endblock %}

{% block content %}
<div class="row justify-content-center mt-5">
    <div class="col-md-6 col-lg-5">
        <div class="card shadow">
            <div class="card-body">
                <h2 class="card-title text-center mb-4">
                    <i class="fa-solid fa-lock"></i> Set New Password
                </h2>
                
                {% if not valid_link %}
                <div class="alert alert-danger" role="alert" data-testid="invalid-link-message">
                    <i class="fa-solid fa-triangle-exclamation me-2"></i>
                    <strong>Invalid or expired link.</strong> Please request a new password reset.
                </div>
                <div class="text-center mt-4">
                    <a href="{% url 'password_reset' %}" class="btn btn-primary">
                        <i class="fa-solid fa-key"></i> Request New Reset Link
                    </a>
                </div>
                {% elif success %}
                <div class="alert alert-success" role="alert" data-testid="reset-complete-message">
                    <i class="fa-solid fa-check-circle me-2"></i>
                    <strong>Password reset successful!</strong> You can now sign in with your new password.
                </div>
                <div class="text-center mt-4">
                    <a href="{% url 'login' %}" class="btn btn-primary">
                        <i class="fa-solid fa-sign-in-alt"></i> Sign In
                    </a>
                </div>
                {% else %}
                <p class="text-muted text-center mb-4">
                    Enter your new password below.
                </p>
                
                <form method="post" data-testid="password-reset-confirm-form">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <label for="id_password" class="form-label">New Password <span class="text-danger">*</span></label>
                        <input 
                            type="password" 
                            name="password" 
                            id="id_password"
                            class="form-control {% if errors.password %}is-invalid{% endif %}"
                            data-testid="new-password-input"
                            minlength="8"
                            required
                            autofocus>
                        <div class="form-text">Minimum 8 characters.</div>
                        {% if errors.password %}
                        <div class="invalid-feedback d-block" data-testid="password-field-error">
                            <i class="fa-solid fa-circle-exclamation me-1"></i>
                            {{ errors.password.0 }}
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="mb-4">
                        <label for="id_password_confirm" class="form-label">Confirm New Password <span class="text-danger">*</span></label>
                        <input 
                            type="password" 
                            name="password_confirm" 
                            id="id_password_confirm"
                            class="form-control {% if errors.password_confirm %}is-invalid{% endif %}"
                            data-testid="new-password-confirm-input"
                            minlength="8"
                            required>
                        {% if errors.password_confirm %}
                        <div class="invalid-feedback d-block" data-testid="password-confirm-field-error">
                            <i class="fa-solid fa-circle-exclamation me-1"></i>
                            {{ errors.password_confirm.0 }}
                        </div>
                        {% endif %}
                    </div>
                    
                    <button 
                        type="submit" 
                        class="btn btn-success w-100"
                        data-testid="reset-confirm-submit-button"
                        data-bs-toggle="tooltip"
                        title="Set your new password">
                        <i class="fa-solid fa-check"></i> Reset Password
                    </button>
                </form>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}