{% extends 'layout.html' %}

{% block content %}
    <v-app id="app" class="justify-center align-center min-vh-100 d-flex">
        <v-container class="d-flex align-center justify-center">
            <v-card class="pa-5" width="600">
                <v-card-title>Reset Password</v-card-title>
                {% from "security/_macros.html" import render_field_with_errors, render_field %}
                {% include "security/_messages.html" %}

                <form action="{{ url_for_security('reset_password', token=reset_password_token) }}" method="POST"
                      name="reset_password_form">
                    {{ reset_password_form.hidden_tag() }}
                    <v-text-field required name="password" type="password" label="New Password"></v-text-field>
                    <v-text-field required name="password_confirm" type="password"
                                  label="Confirm Password"></v-text-field>

                    <v-btn type="submit" color="primary">Reset Password</v-btn>
                </form>
            </v-card>
        </v-container>
        <v-snackbar absolute button v-model="snackBar">
            ${snackMessage}
            <v-btn text color="primary" @click.native="value = false">Close</v-btn>
        </v-snackbar>
    </v-app>
{% endblock %}

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

        const app = createApp({
            data() {
                return {
                    snackBar: false,
                    snackMessage: '',
                };
            },
            methods: {
                showSnack(message) {
                    this.snackMessage = message;
                    this.snackBar = true;
                },
            },
            delimiters: ['${', '}']
        });

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