{% extends 'base.html' %}
{% block title %}Set New Password | BUSA{% endblock %}

{% block content %}
<div class="d-flex justify-content-center align-items-center pt-5">
    <div class="card shadow-lg border-0 p-4 text-center" style="width: 100%; max-width: 500px; border-radius: 15px;">

        <!-- Icon -->
        <div class="mb-3">
            <i class="fas fa-lock-open fa-3x text-primary"></i>
        </div>

        <!-- Title & Instructions -->
        <h4 class="fw-bold">Create a New Password</h4>
        <p class="text-muted mt-2">
            Enter your new password twice so we can confirm you typed it correctly.
        </p>

        <!-- Form -->
        <form method="POST" class="mt-3 text-start">
            {% csrf_token %}
            
            <div class="mb-3">
                <label class="form-label">New Password</label>
                {{ form.new_password1 }}
            </div>

            <div class="mb-3">
                <label class="form-label">Confirm New Password</label>
                {{ form.new_password2 }}
            </div>

            <button type="submit" class="btn btn-primary w-100">Update Password</button>
        </form>

    </div>
</div>
{% endblock %}