{% extends 'layout.html' %}
{% block content %}
    <div class="main">
        <h2>Login</h2>

        <form action="{{ url_for_security('login') }}" method="POST" name="send_login_form">
            {{ send_login_form.hidden_tag() }}
            <v-text-field required label="Email" name="email" type="email"></v-text-field>
            <v-btn type="submit" color="primary">Login</v-btn>
        </form>

    </div>
{% 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 %}