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

{% block authentication_page_content %}
    <h5 class="mb-2">Change Password</h5>
    <div>
        <form x-data="{
            passwords_match: false,
            old_password: new GlueCharField('old_password', {required: true}),
            new_password1: new GlueCharField('new_password1', {required: true, label: 'New Password'}),
            new_password2: new GlueCharField('new_password2', {required: true, label: 'Confirm New Password'}),

            init() {
                $watch(() => [this.new_password1, this.new_password2], () => {
                    this.passwords_match = this.new_password1.value === this.new_password2.value
                })
            }
        }" 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">
                    <span x-show="!passwords_match" class="text-app-danger">
                        Password confirmation does not match new password.
                    </span>
                    <button
                        type="submit"
                        class="w-100 btn btn-app-primary bg-app-primary mt-2"
                        :disabled="!passwords_match"
                    >
                        Submit
                    </button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}
