{% extends "base.html" %}
{% load i18n %}
{% load widget_tweaks %}
{% block head_title %}
  {% trans "Change Password" %}
{% endblock %}

{% block content %}
<div class="container shadow p-4 mt-5 bg-white rounded mb-4 shadow-lg">
    <div class="row justify-content-center card">
        <div class="col-md-6 col-lg-5 card-body-wrapper">
            <div class="card shadow-sm border-0">
                <div class="card-body p-4">

                    <h4 class="mb-3 text-center">{% trans "Change Password" %}</h4>
                    <p class="text-muted text-center mb-4">
                        {% trans "Enter your current and new password below." %}
                    </p>

                    <form method="POST" action="{% url 'account_change_password' %}">
                        {% csrf_token %}
                        {{ redirect_field }}

                        {# IF USING CRISPY FORMS #}
                        {# {{ form|crispy }} #}

                        {# DEFAULT BOOTSTRAP FIELDS #}
                       {% for field in form %}
                          <div class="mb-3">
                              <label class="form-label">{{ field.label }}</label>
                              {{ field|add_class:"form-control" }}
                              {% if field.errors %}
                                  <div class="text-danger small">{{ field.errors }}</div>
                              {% endif %}
                          </div>
                        {% endfor %}

                        <button type="submit" class="btn btn-primary w-100">
                            {% trans "Change Password" %}
                        </button>

                        <div class="mt-3 text-center">
                            <a href="{% url 'account_reset_password' %}">
                                {% trans "Forgot Password?" %}
                            </a>
                        </div>
                    </form>

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