{% extends 'login-layout.html' %}

{% block content %}
<v-main class="d-flex flex-column align-center justify-center" style="min-height: 100vh; background: rgb(var(--v-theme-background));">
    <v-card class="mx-auto pa-8 w-100" rounded="lg" style="max-width: 424px;">
        <div class="text-center mb-6">
            <div class="mb-4">{% include "_brand.html" %}</div>
            <div class="text-headline-small font-weight-bold">Confirm your email</div>
            <div class="text-body-medium text-medium-emphasis">Confirm only if you created this account. If you did not, close this page.</div>
        </div>

        <form action="{{ url_for_security('confirm_email', token=confirm_email_token) }}" method="POST">
            {{ confirm_email_form.hidden_tag() }}
            {% include "security/_messages.html" %}
            <v-btn type="submit" color="primary" size="large" block class="mb-4">Confirm my email</v-btn>
        </form>
    </v-card>
</v-main>
{% endblock %}

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

    const app = createApp({ delimiters: delimiters });
    app.use(vuetify).mount('#app');
</script>
{% endblock %}