{% extends 'django_spire/auth/page/auth_page.html' %}

{% block authentication_page_content %}
    <h5 class="mb-2">Change Password</h5>
    <div>
        <form x-data="{
            old_password: new GlueCharField('old_password', {required: true}),
            new_password1: new GlueCharField('new_password1', {required: true}),
            new_password2: new GlueCharField('new_password2', {required: true})
        }" method="post" class="text-app-secondary">
            {% csrf_token %}
            <div class="row">
                <div class="col">
                    {% include 'django_glue/form/field/password_field.html' with glue_field='old_password' %}
                </div>
            </div>
            <div class="row mt-2">
                <div class="col">
                    {% include 'django_glue/form/field/password_field.html' with glue_field='new_password1' %}
                </div>
            </div>
            <div class="row mt-2">
                <div class="col">
                    {% include 'django_glue/form/field/password_field.html' with glue_field='new_password2' %}
                </div>
            </div>
            <div class="row mt-2">
                <div class="col">
                    <button type="submit" class="w-100 btn btn-app-primary bg-app-primary mt-2">Submit</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}
