{% extends "base.html" %}

{% block title %}Welcome to Vilcos{% endblock %}

{% block content %}
<v-main>
    <v-container>
        <v-row justify="center">
            <v-col cols="12" md="8">
                <v-card class="mb-6">
                    <v-card-title class="text-h4 font-weight-bold">
                        {% if user %}
                        Welcome, {{ user.username }}!
                        {% else %}
                        Welcome to Vilcos
                        {% endif %}
                    </v-card-title>
                    <v-card-subtitle class="text-subtitle-1">
                        A modern FastAPI-based web framework with powerful features
                    </v-card-subtitle>
                    <v-card-text>
                        <v-list>
                            <v-list-subheader>Framework Features</v-list-subheader>

                            <v-list-item prepend-icon="mdi-flash">
                                <v-list-item-title>Real-time WebSockets</v-list-item-title>
                                <v-list-item-subtitle>Built-in support for multi-channel
                                    communication</v-list-item-subtitle>
                            </v-list-item>

                            <v-list-item prepend-icon="mdi-vuejs">
                                <v-list-item-title>Modern UI</v-list-item-title>
                                <v-list-item-subtitle>Vue 3 + Vuetify for beautiful interfaces</v-list-item-subtitle>
                            </v-list-item>

                            <v-list-item prepend-icon="mdi-shield-lock">
                                <v-list-item-title>Authentication Ready</v-list-item-title>
                                <v-list-item-subtitle>Simple session-based authentication system</v-list-item-subtitle>
                            </v-list-item>

                            <v-list-item prepend-icon="mdi-database">
                                <v-list-item-title>Async Database</v-list-item-title>
                                <v-list-item-subtitle>SQLAlchemy with connection pooling</v-list-item-subtitle>
                            </v-list-item>
                        </v-list>

                        <v-divider class="my-4"></v-divider>

                        {% if not user %}
                        <v-row class="mt-4">
                            <v-col cols="12" sm="6">
                                <v-btn block color="primary" href="/auth/signin" prepend-icon="mdi-login"
                                    variant="elevated">
                                    Sign In
                                </v-btn>
                            </v-col>
                            <v-col cols="12" sm="6">
                                <v-btn block color="secondary" href="/auth/signup" prepend-icon="mdi-account-plus"
                                    variant="elevated">
                                    Sign Up
                                </v-btn>
                            </v-col>
                        </v-row>
                        {% else %}
                        <v-row class="mt-4">
                            <v-col cols="12">
                                <v-btn block color="error" @click="handleSignOut" prepend-icon="mdi-logout"
                                    variant="elevated">
                                    Sign Out
                                </v-btn>
                            </v-col>
                        </v-row>
                        {% endif %}
                    </v-card-text>
                </v-card>



                <v-card>
                    <v-card-title>Quick Links</v-card-title>
                    <v-card-text>
                        <v-list>
                            <v-list-item href="https://fastapi.tiangolo.com/" target="_blank"
                                prepend-icon="mdi-book-open-variant">
                                <v-list-item-title>FastAPI Documentation</v-list-item-title>
                            </v-list-item>

                            <v-list-item href="https://vuejs.org/" target="_blank" prepend-icon="mdi-vuejs">
                                <v-list-item-title>Vue.js Documentation</v-list-item-title>
                            </v-list-item>

                            <v-list-item href="https://vuetifyjs.com/" target="_blank"
                                prepend-icon="mdi-view-dashboard">
                                <v-list-item-title>Vuetify Documentation</v-list-item-title>
                            </v-list-item>
                        </v-list>
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</v-main>
{% endblock %}

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

    const app = createApp({
        data() {
            return {
                loading: false,
                drawer: true,
                snackbar: false,
            }
        },
        methods: {
            async handleSignOut() {
                try {
                    this.loading = true;
                    const response = await axios.post('/auth/signout');
                    window.location.href = '/auth/signin';
                } catch (error) {
                    console.error('Sign-out error:', error);
                } finally {
                    this.loading = false;
                }
            }
        },
        delimiters: ['${', '}']
    });

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