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

{% block authentication_page_content %}
    <h5 class="mb-2">Change Password</h5>
    <div x-data="{
            passwordsMatch: true,
            passwordsEmpty: true,
            oldPassword: '',
            newPassword1: '',
            newPassword2: '',

            init() {
                console.log('Hello');
                $watch(() => [this.newPassword1, this.newPassword2], () => {
                    this.passwordsMatch = this.newPassword1 === this.newPassword2
                })
            }
        }" >
        <form method="post" class="text-secondary">
            {% csrf_token %}
            <div class="row">
                <div class="col">
                    <label for="old_password">Old Password</label>
                    <input type="password" x-model="oldPassword" name="old_password" id="old_password" class="form-control">
                </div>
            </div>
            <div class="row mt-2">
                <div class="col pt-4">
                    <label for="new_password1">New Password</label>
                    <input type="password" x-model="newPassword1" name="new_password1" id="password1" class="form-control">
                </div>
            </div>
            <div class="row mt-2">
                <div class="col">
                    <label for="new_password2">Confirm Password</label>
                    <input type="password" x-model="newPassword2" name="new_password2" id="password2" class="form-control">
                </div>
            </div>
            <div class="row my-2">
                <div class="col">
                    <span x-show="!passwordsMatch" class="text-danger">
                        New passwords do not match
                    </span>
                    <button
                        type="submit"
                        class="w-100 btn btn-primary bg-primary mt-2"
                        :disabled="!passwordsMatch"
                    >
                        Submit
                    </button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}