<script setup>
import { onMounted } from 'vue';
import { hasToken } from '@Services/Api';
import { reloadApp } from '@Services/Page';
import { useRouter } from 'vue-router';

import useLoader    from '@Stores/Loader';

import Layout  from '@Holos/Layout/App.vue';
import Link    from '@Holos/Skeleton/Sidebar/Link.vue';
import Section from '@Holos/Skeleton/Sidebar/Section.vue';

/** Definidores */
const loader = useLoader()
const router = useRouter();

/** Propiedades */
defineProps({
    title: String,
});

/** Ciclos */
onMounted(() => {
    loader.boot()

    if(!hasToken()) {
        return router.push({ name: 'auth.index' })
    } else {
        reloadApp();
    }
})

</script>

<template>
    <Layout
        :title="title"
    >
        <template #leftSidebar>
            <Section name="Principal">
                <Link
                    icon="monitoring"
                    name="Dashboard" 
                    to="dashboard.index"
                />
                <Link
                    icon="calendar_month"
                    name="Vacaciones" 
                    to="vacations.index"
                />
                <Link
                    icon="person"
                    name="Perfil" 
                    to="profile.show"
                />
            </Section>
            <Section
                :name="$t('admin.title')"
            >
            </Section>
        </template>
        <!-- Contenido -->
        <RouterView />
        <!-- Fin contenido -->
    </Layout>
</template>
