{% extends "account/base_manage_password.html" %}
{% load allauth i18n lucide %}

{% comment %}
    Overridden for layout: the fields lose their visible labels (allauth already gives each
    a placeholder), the current password is set apart from the new one, and the actions
    become real buttons.

    The two field groups are rendered by two `fields` calls with complementary excludes —
    that is what puts air between "what you have now" and "what you want it to be", rather
    than three identical boxes in a stack.
{% endcomment %}

{% block head_title %}
    {% trans "Change Password" %}
{% endblock head_title %}

{% block content %}
    {% element h1 %}
        {% trans "Change Password" %}
    {% endelement %}

    <form class="mt-8" method="post" action="{% url 'account_change_password' %}">
        {% csrf_token %}
        {{ redirect_field }}

        {% element fields form=form unlabeled=True exclude="password1,password2" %}
        {% endelement %}

        <div class="mt-10">
            {% element fields form=form unlabeled=True exclude="oldpassword" %}
            {% endelement %}
        </div>

        <div class="mt-10 flex flex-wrap items-center justify-end gap-2">
            <a class="btn btn-accent btn-outline gap-2" href="{% url 'account_reset_password' %}">{% lucide "life-buoy" size=16 %} {% trans "Forgot Password?" %}</a>
            <button class="btn btn-primary gap-2" type="submit">{% lucide "key-round" size=16 %} {% trans "Change Password" %}</button>
        </div>
    </form>
{% endblock content %}