<template>
    <div class="min-h-screen bg-white text-neutral-900">
        <header class="fixed top-0 left-0 right-0 z-50 border-b border-neutral-200 bg-primary-500 h-[85px]">
            <div class="flex h-full w-full items-center px-6">
                <NuxtLink to="/" class="flex items-center gap-3">
          <span class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4">
            LOGO
          </span>
                </NuxtLink>

                <nav class="mx-8 flex flex-1 gap-8 text-2xl font-bold uppercase text-white"></nav>

                <NuxtLink to="/" class="ml-auto text-xl font-bold uppercase text-white transition hover:opacity-80">
                    Quitter le panel admin
                </NuxtLink>
            </div>
        </header>

        <aside
            class="fixed left-0 top-[85px] z-40 w-64 h-[calc(100vh-85px)] bg-primary-500 text-white flex flex-col"
        >
            <div class="flex-1 overflow-y-auto p-4 space-y-4">
                Dashboard
            </div>

            <div class="p-4 border-t border-neutral-700">
                <button
                    @click="handleLogout"
                    class="w-full bg-red-600 hover:bg-red-700 py-2 rounded font-bold"
                >
                    Déconnexion
                </button>
            </div>
        </aside>

        <main class="pt-[85px] ml-64 px-6">
            <div class="mx-auto w-full max-w-[1280px] py-6">
                <slot/>
            </div>
        </main>
    </div>
</template>

<script setup lang="ts">
const handleLogout = async () => {
    try {
        await auth.logout()
    } finally {
        await navigateTo('/login')
    }
}
</script>
