{% extends 'base.html' %}
{% block title %}Change Password{% endblock %}

{% block content %}
<div class="auth-container d-flex justify-content-center align-items-center">
    <div class="auth-card card shadow-lg p-4">

        <div class="text-center mb-4">
            <i class="bi bi-key auth-icon"></i>
            <h4 class="mt-2">Change Password</h4>
            <p class="text-muted small">Set your new secure password</p>
        </div>

        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }} mb-3">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}

        <form method="post">
            {% csrf_token %}

            {% if form.errors %}
                <div class="alert alert-danger">
                    Please correct the errors below.
                </div>
            {% endif %}

            <!-- OLD PASSWORD -->
            <div class="mb-3">
                <label class="form-label">Old Password</label>

                <div class="input-group">
                    <input type="password" name="old_password" id="oldPassword" class="form-control" required>

                    <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('oldPassword', this)">
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
            </div>

            <!-- NEW PASSWORD -->
            <div class="mb-3">
                <label class="form-label">New Password</label>

                <div class="input-group">
                    <input type="password" name="new_password1" id="newPassword1" class="form-control" required>

                    <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('newPassword1', this)">
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
            </div>

            <!-- CONFIRM PASSWORD -->
            <div class="mb-3">
                <label class="form-label">Confirm New Password</label>

                <div class="input-group">
                    <input type="password" name="new_password2" id="newPassword2" class="form-control" required>

                    <button class="btn btn-outline-secondary" type="button" onclick="togglePassword('newPassword2', this)">
                        <i class="bi bi-eye"></i>
                    </button>
                </div>
            </div>

            <button type="submit" class="btn btn-dark w-100">
                <i class="bi bi-check2-circle"></i> Update Password
            </button>
        </form>

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