{% 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">
            <div class="main">
                <h2>Resend confirmation instructions</h2>

                <form action="{{ url_for_security('send_confirmation') }}" method="POST" name="send_confirmation_form">
                    {{ send_confirmation_form.hidden_tag() }}
                    <v-text-field required label="Email" name="email" type="email"></v-text-field>

                    <v-btn type="submit" color="primary">Resend Instructions</v-btn>
                </form>
            </div>
            <v-snackbar absolute button v-model="snackBar">
                ${snackMessage}
                <v-btn text color="primary" @click.native="value = false">Close</v-btn>
            </v-snackbar>
        </v-container>
    </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 %}