{% extends 'master.html' %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
    <div class="card p-4 shadow-lg border-0" style="max-width: 400px; width: 100%; border-radius: 12px;">
        <h3 class="text-center text-primary fw-bold mb-3">Change Password</h3>

        <!-- Display Success/Error Messages -->
        {% if messages %}
            <div class="mb-3">
                {% for message in messages %}
                    <div class="alert {% if message.tags == 'error' %}alert-danger{% else %}alert-success{% endif %} text-center" role="alert">
                        {{ message }}
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        <form method="POST">
            {% csrf_token %}
            
            <div class="mb-3">
                <label for="id_old_password" class="form-label fw-semibold">Current Password</label>
                <input type="password" name="old_password" id="id_old_password" class="form-control rounded-3" required>
            </div>

            <div class="mb-3">
                <label for="id_new_password1" class="form-label fw-semibold">New Password</label>
                <input type="password" name="new_password1" id="id_new_password1" class="form-control rounded-3" required>
            </div>

            <div class="mb-3">
                <label for="id_new_password2" class="form-label fw-semibold">Confirm New Password</label>
                <input type="password" name="new_password2" id="id_new_password2" class="form-control rounded-3" required>
            </div>

            <button type="submit" class="btn btn-primary w-100 mt-2 rounded-3">Update Password</button>
        </form>
    </div>
</div>
{% endblock %}