{% 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 mt-10" width="600">
                <v-card-title class="mb-4">
                    Reset Password
                </v-card-title>
                <form action="{{ url_for_security('forgot_password') }}" method="POST" id="forgotPasswordForm"
                      ref="form">
                    <v-card-text>
                        {{ forgot_password_form.hidden_tag() }}
                        <v-text-field required type="email" name="email" label="Email"></v-text-field>
                    </v-card-text>
                    <v-card-text>
                        {% if forgot_password_form.errors %}
                            {% for k, err in forgot_password_form.errors.items() %}
                                <v-alert type="error" dense dismissible>  {{ err[0] }}</v-alert>
                            {% endfor %}
                        {% endif %}
                    </v-card-text>
                    <v-card-actions class="justify-end">
                        <v-btn color="primary" type="submit">Send Instructions</v-btn>
                    </v-card-actions>
                </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;
                },
                submit() {
                    document.getElementById('forgotPasswordForm').submit();
                }
            },
            delimiters: ['${', '}']
        });

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