{% extends 'layout.html' %}

{% block content %}
<v-container fluid class="pa-4">
    <v-card max-width="500" class="mx-auto">
        <v-card-title class="text-headline-small">
            <i class="ti ti-key mr-2"></i>
            Change Password
        </v-card-title>
        <v-card-subtitle>
            Update your account password
        </v-card-subtitle>

        <v-card-text>
            {% include "security/_messages.html" %}

            <v-form
                id="changePasswordForm"
                action="{{ url_for_security('change_password') }}"
                method="POST"
            >
                {{ change_password_form.hidden_tag() }}

                {% if active_password and current_user.has_usable_password %}
                <v-text-field
                    name="password"
                    label="Current Password"
                    type="password"
                    required
                    class="mb-2"
                ></v-text-field>

                {% if change_password_form.password.errors %}
                <v-alert type="error" variant="tonal" density="compact" class="mb-4">
                    {{ change_password_form.password.errors[0] }}
                </v-alert>
                {% endif %}
                {% else %}
                <v-alert type="info" variant="tonal" density="compact" class="mb-4">
                    Set a password to enable email login for your account.
                </v-alert>
                {% endif %}

                <v-text-field
                    name="new_password"
                    label="New Password"
                    type="password"
                    required
                    class="mb-2"
                ></v-text-field>

                {% if change_password_form.new_password.errors %}
                <v-alert type="error" variant="tonal" density="compact" class="mb-4">
                    {{ change_password_form.new_password.errors[0] }}
                </v-alert>
                {% endif %}

                <v-text-field
                    name="new_password_confirm"
                    label="Confirm New Password"
                    type="password"
                    required
                    class="mb-4"
                ></v-text-field>

                {% if change_password_form.new_password_confirm.errors %}
                <v-alert type="error" variant="tonal" density="compact" class="mb-4">
                    {{ change_password_form.new_password_confirm.errors[0] }}
                </v-alert>
                {% endif %}

                <v-btn color="primary" @click="submit">
                    Change Password
                </v-btn>
            </v-form>
        </v-card-text>
    </v-card>
</v-container>
{% endblock %}

{% block js %}
<script>
    const { createApp } = Vue;
    const { createVuetify } = Vuetify;
    const vuetify = createVuetify(config.vuetifyConfig);

    const app = createApp({
        mixins: [layoutMixin],
        delimiters: ['${', '}'],
        methods: {
            submit() {
                document.getElementById('changePasswordForm').submit();
            }
        }
    });

    registerStkComponents(app);
    app.use(vuetify).mount('#app');
</script>
{% endblock %}