<template>
    <div class="h-screen overflow-hidden">
        <div class="flex h-full">
            <aside class="flex h-full w-64 flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500">
                <div>
                    <img src="/malio.png" alt="Logo" class="w-auto"/>
                </div>
                <nav class="flex-1 px-4 pb-6">
                    <template v-if="isAdmin">
                        <NuxtLink
                            to="/"
                            class="flex items-center gap-3 px-4 pb-3 pt-6 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600 border-t border-secondary-500"
                            active-class="bg-primary-50 text-primary-600"
                        >
                            Tableau de bord
                        </NuxtLink>
                        <NuxtLink
                            to="/calendar"
                            class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
                            active-class="bg-primary-50 text-primary-600"
                        >
                            Calendrier
                        </NuxtLink>
                        <NuxtLink
                            to="/employees"
                            class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
                            active-class="bg-primary-50 text-primary-600"
                        >
                            Employés
                        </NuxtLink>
                        <NuxtLink
                            to="/sites"
                            class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
                            active-class="bg-primary-50 text-primary-600"
                        >
                            Sites
                        </NuxtLink>
                        <NuxtLink
                            to="/users"
                            class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
                            active-class="bg-primary-50 text-primary-600"
                        >
                            Utilisateurs
                        </NuxtLink>
                        <NuxtLink
                            to="/absence-types"
                            class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
                            active-class="bg-primary-50 text-primary-600"
                        >
                            Types d'absence
                        </NuxtLink>
                    </template>
                </nav>

                <div class="flex flex-col gap-2 items-center p-4">
                    <button
                        type="button"
                        class="w-full rounded-lg px-4 py-2 text-md font-semibold text-white bg-primary-500"
                        @click="handleLogout"
                    >
                        Déconnexion
                    </button>
                    <p class="font-bold">v{{ version }}</p>
                </div>
            </aside>

            <main class="h-full flex-1 overflow-y-auto px-8 py-8">
                <slot/>
            </main>
        </div>
    </div>
</template>

<script setup lang="ts">
const auth = useAuthStore()
const {version} = useAppVersion()
const isAdmin = computed(() => auth.user?.roles?.includes('ROLE_ADMIN') ?? false)

const handleLogout = async () => {
    await auth.logout()
    await navigateTo('/login')
}
</script>
