<script setup>
import { onMounted } from 'vue';
import useLoader    from '@Stores/Loader';
import { hasPermission } from '@Plugins/RolePermission';

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

/** Definidores */
const loader = useLoader()

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

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

</script>

<template>
    <Layout
        :title="title"
    >
    
        <template #leftSidebar>
            <Section name="Principal">
                <Link
                    icon="monitoring"
                    name="dashboard"
                    to="dashboard.index"
                />
            </Section>
            <Section :name="$t('pos.title')">
                <Link
                    icon="category"
                    name="pos.category"
                    to="pos.category.index"
                />
                <DropdownMenu
                    icon="folder"
                    name="Catálogos"
                >
                    <SubLink
                        v-if="hasPermission('warehouses.index')"
                        icon="warehouse"
                        name="pos.warehouses"
                        to="pos.warehouses.index"
                    />
                    <SubLink
                        v-if="hasPermission('clients.index')"
                        icon="accessibility"
                        name="pos.clients"
                        to="pos.clients.index"
                    />
                    <SubLink
                        v-if="hasPermission('inventario.index')"
                        icon="stack"
                        name="pos.bundles"
                        to="pos.bundles.index"
                    />
                    <SubLink
                        v-if="hasPermission('inventario.index')"
                        icon="inventory_2"
                        name="pos.inventory"
                        to="pos.inventory.index"
                    />
                    <SubLink
                        v-if="hasPermission('suppliers.index')"
                        icon="support_agent"
                        name="pos.suppliers"
                        to="pos.suppliers.index"
                    />
                    <SubLink
                        v-if="hasPermission('units.index')"
                        icon="scale"
                        name="pos.unitMeasure"
                        to="pos.unitMeasure.index"
                    />
                </DropdownMenu>
                <Link
                    v-if="hasPermission('movements.index')"
                    icon="swap_horiz"
                    name="pos.movements"
                    to="pos.movements.index"
                />
                <Link
                    icon="point_of_sale"
                    name="pos.cashRegister"
                    to="pos.cashRegister.index"
                />
                <Link
                    icon="receipt_long"
                    name="pos.sales"
                    to="pos.sales.index"
                />
                <Link
                    v-if="hasPermission('returns.index')"
                    icon="Sync"
                    name="pos.returns"
                    to="pos.returns.index"
                />
                <Link
                    v-if="hasPermission('client-tiers.index')"
                    icon="leaderboard"
                    name="pos.clientTiers"
                    to="pos.client-tiers.index"
                />
                <Link
                    v-if="hasPermission('invoice-requests.index')"
                    icon="request_quote"
                    name="pos.billingRequests"
                    to="pos.billingRequests.index"
                />
                <Link
                    v-if="hasPermission('bills.index')"
                    icon="finance"
                    name="Facturas / Gastos"
                    to="admin.bills.index"
                />
            </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.title"
                    to="admin.roles.index"
                />
                <Link
                    v-if="hasPermission('activities.index')"
                    icon="event"
                    name="history.title"
                    to="admin.activities.index"
                />
            </Section>
        </template>
        <!-- Contenido -->
        <RouterView />
        <!-- Fin contenido -->
    </Layout>
</template>
