{% extends 'layout.html' %}
{% block body_class %}home{% endblock %}
{% block content %}
    <v-container fluid class="fill-height">
        <v-row align="center" justify="center">
            <v-col cols="12" sm="10" md="6" lg="4" class="text-center">
                <div class="mb-6">{% with brand_size = 120 %}{% include "_brand.html" %}{% endwith %}</div>

                <h1 class="text-headline-large font-weight-bold mb-3">Build faster with stk</h1>
                <p class="text-body-large text-medium-emphasis mb-8">
                    A modern Flask framework for building web applications.
                </p>

                {% if current_user.is_authenticated %}
                <v-btn color="primary" size="large" href="/dashboard">
                    <template v-slot:prepend><i class="ti ti-layout-dashboard"></i></template>
                    Go to Dashboard
                </v-btn>
                {% else %}
                <v-btn color="primary" size="large" href="/register">
                    Get Started
                </v-btn>
                <div class="mt-4 text-body-medium text-medium-emphasis">
                    Already have an account? <a href="/login" class="text-primary">Sign in</a>
                </div>
                {% endif %}
            </v-col>
        </v-row>
    </v-container>

    <div style="position: fixed; bottom: 24px; left: 0; right: 0;" class="text-center text-body-small text-medium-emphasis">
        <a href="https://docs.stk.dev" target="_blank" rel="noopener" class="text-decoration-none">Documentation</a>
        <span class="mx-2">•</span>
        <a href="https://github.com/level09/stk" target="_blank" rel="noopener" class="text-decoration-none">GitHub</a>
    </div>
{% endblock %}

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

        const app = createApp({
            mixins: [layoutMixin],
            delimiters: config.delimiters
        });

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