{% extends "base.html" %}

{% block title %}Change Password{%endblock%}

{% block content %}
<style>
    .card {
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
</style>

<div class="d-flex justify-content-center align-items-center">
    <div class="card p-4" style="max-width: 400px; width: 90%">
        <h1 class="text-center mb-4" style="font-size: 2rem;">Change Your Password</h1>
        <form method="POST">
            {{ form.hidden_tag() }}
            <div class="mb-3">
                <label for="current-password" class="form-label">Current Password</label>
                {{ form.current_password(class="form-control", placeholder="") }}
                {% if form.current_password.errors %}
                <div class="text-danger small">
                    {{ form.current_password.errors[0] }}
                </div>
                {% endif %}
            </div>
            <div class="mb-3">
                <label for="new-password" class="form-label">New Password</label>
                {{ form.new_password(class="form-control", placeholder="Enter password") }}
                {% if form.new_password.errors %}
                <div class="text-danger small">
                    {{ form.new_password.errors[0] }}
                </div>
                {% endif %}
            </div>
            <div class="mb-3">
                <label for="confirm-password" class="form-label">Confirm New Password</label>
                {{ form.confirm_password(class="form-control", placeholder="Enter password") }}
                {% if form.confirm_password.errors %}
                <div class="text-danger small">
                    {{ form.confirm_password.errors[0] }}
                </div>
                {% endif %}
            </div>
            {{ form.submit(class="btn btn-primary w-100", label="Update Password") }}
        </form>
        <p class="text-center text-muted mt-3" style="font-size: 0.85rem;">
            Make sure your password is at least 8 characters long and includes a mix of letters and numbers.
        </p>
    </div>
</div>
{% endblock %}