<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import GlassBox from "@/Components/FlightsGoneBy/GlassBox.vue";
import { Head, Link } from "@inertiajs/vue3";
import { usePage } from "@inertiajs/vue3";
import { computed } from "vue";
import {SharedProps} from "@/Types/types";
import { router } from "@inertiajs/vue3";

defineOptions({ layout: MainLayout });

const page = usePage<SharedProps>();
const name = computed(() => page?.props?.auth?.user?.name || 'there');
</script>

<template>
    <Head title="Dashboard" />
    <GlassBox :title="`Hey there ${name} 👋`" blurb="What would you like to do?">
        <v-container>
            <v-row>
                <v-col cols="12" md="6">
                    <v-btn size="large" block href="#" prepend-icon="mdi-plus">
                        Add a Flight
                    </v-btn>
                </v-col>
                <v-col cols="12" md="6">
                    <v-btn size="large" block href="#" prepend-icon="mdi-pencil-outline">
                        Edit Flights
                    </v-btn>
                </v-col>
                <v-col cols="12" md="6">
                    <v-btn size="large" block @click="router.visit(route('import.fr24'))" prepend-icon="mdi-import">
                        Import from FR24
                    </v-btn>
                </v-col>
                <v-col cols="12" md="6">
                    <v-btn size="large" block :href="`/u/${name}`" prepend-icon="mdi-account-outline">
                        View Profile
                    </v-btn>
                </v-col>
                <v-col cols="12">
                    <v-btn size="large" block @click="router.post(route('logout'))" prepend-icon="mdi-logout">
                        Log Out
                    </v-btn>
                </v-col>
            </v-row>
        </v-container>
    </GlassBox>
</template>
