{% 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">Choose a new password</div>
            <div class="text-body-medium text-medium-emphasis">Every signed-in session will be signed out</div>
        </div>

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

            {% include "security/_messages.html" %}

            {% for field, errors in reset_password_form.errors.items() %}
            <v-alert type="error" variant="tonal" density="compact" class="mb-4">{{ errors[0] }}</v-alert>
            {% endfor %}

            <v-btn type="submit" color="primary" size="large" block class="mb-4">Reset password</v-btn>
        </form>
    </v-card>

    <div class="mt-6 w-100" style="max-width: 424px;">
        <v-btn href="{{ url_for_security('login') }}" variant="text" color="primary">
            <i class="ti ti-chevron-left mr-1"></i>
            Back to log in
        </v-btn>
    </div>
</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 %}