{% extends "Lipa_mdogo/base_dashboard.html" %}

{% block content %}
<div class="container mt-4">
    <h5>Change Password</h5>

    <form method="post" class="mt-4">
    {% csrf_token %}

    {% for field in form %}
        <div class="mb-3">
            <label class="form-label fw-semibold">
                {{ field.label }}
            </label>

            {{ field }}

            {% if field.help_text %}
                <div class="form-text">{{ field.help_text }}</div>
            {% endif %}

            {% for error in field.errors %}
                <div class="text-danger small">{{ error }}</div>
            {% endfor %}
        </div>
    {% endfor %}

    <button class="btn btn-primary w-100 mt-2">
        Update Password
    </button>
</form>
</div>
<style>
    input {
        width: 100%;
        padding: .6rem .75rem;
        border-radius: .375rem;
        border: 1px solid #ced4da;
    }
    input:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 .15rem rgba(13,110,253,.25);
        outline: none;
    }
</style>
{% endblock %}