<script setup>
import { onMounted } from 'vue';
import { hasPermission } from '@Plugins/RolePermission';
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';
import DropDown from '@Holos/Skeleton/Sidebar/Drop.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="grid_view"
                name="Dashboard" 
                to="admin.dashboard.index"
                />
                <DropDown 
                    icon="people"
                    name="Empleados" 
                    to="admin.employees.index"
                    :collapsed="true"
                >
                        <Link
                            icon="school"
                            name="Historial Académico" 
                            to="admin.academic.index"
                        />
                        <Link
                            icon="security"
                            name="Seguridad y Salud" 
                            to="admin.security.index"
                        />
                        <Link
                            icon="payments"
                            name="Nómina" 
                            to="admin.payroll.index"
                        />
                        <Link
                            icon="info"
                            name="Información Adicional" 
                            to="admin.additional.index"
                        />
                </DropDown>
            </Section>
            <Section name="Vacaciones">
                <Link
                    icon="grid_view"
                    name="Vacaciones" 
                    to="admin.vacations.index"
                />
            </Section>
            <Section name="Capacitaciones">
                <DropDown
                    icon="grid_view"
                    name="Cursos" 
                    to="admin.courses.index"
                    :collapsed="true"
                >
                    <Link
                        icon="grid_view"
                        name="Solicitud de Cursos" 
                        to="admin.courses.request"
                    />
                    <Link
                        icon="grid_view"
                        name="Asignación de Cursos" 
                        to="admin.courses.assignamment"
                    />
                    <Link
                        icon="grid_view"
                        name="Calendario de Cursos" 
                        to="admin.courses.calendar"
                    />
                </DropDown>
            </Section>
            <Section name="Eventos">
                <DropDown
                    icon="grid_view"
                    name="Eventos" 
                    to="admin.events.index"
                    :collapsed="true"
                >
                    <Link
                        icon="grid_view"
                        name="Asignación de presupuesto" 
                        to="admin.events.assignamment"
                    />
                    <Link
                        icon="grid_view"
                        name="Justificación de gastos" 
                        to="admin.events.justification"
                    />
                    <Link
                        icon="grid_view"
                        name="Reportes de gastos" 
                        to="admin.events.reports"
                    />
                </DropDown>
            </Section>
            <Section
                v-if="hasPermission('users.index')"
                :name="$t('admin.title')"
            >
                <!-- <Link
                    v-if="hasPermission('users.index')"
                    icon="people"
                    name="users.title" 
                    to="admin.users.index"
                /> -->
                <Link
                    v-if="hasPermission('roles.index')"
                    icon="license"
                    name="Roles" 
                    to="admin.roles.index"
                />
                <Link
                    v-if="hasPermission('activities.index')"
                    icon="event"
                    name="Historial de Acciones" 
                    to="admin.activities.index"
                />
            </Section>
            <Section
                name="Documentos"
            >
                <Link
                    v-if="hasPermission('activities.index')"
                    icon="event"
                    name="Maquetador de Documentos" 
                    to="admin.maquetador.index"
                />
            </Section>
        </template>
        <!-- Contenido -->
        <RouterView />
        <!-- Fin contenido -->
    </Layout>
</template>
