<template>
    <div class="min-h-screen text-neutral-900 grid grid-rows-[85px,1fr]">
        <!-- HEADER -->
        <header class="bg-primary-500 z-50 h-[85px]">
            <div class="h-full w-full px-6 grid grid-cols-[auto,1fr,auto] items-center gap-8">
                <NuxtLink to="/" class="grid place-items-center">
          <span class="grid place-items-center bg-white text-xl font-bold uppercase text-primary-500 p-4">
            LOGO
          </span>
                </NuxtLink>

                <nav class="text-2xl font-bold uppercase text-white"></nav>

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

        <div class="grid grid-cols-[16rem,1fr] h-[calc(100vh-85px)] min-h-0">
            <aside class="bg-primary-500 text-white min-h-0 grid grid-rows-[auto,1fr,auto]">
                <div class="text-xl p-4 font-semibold">Tableau de bord</div>
                <div class="p-4 font-semibold">transporteur</div>

                <div class="overflow-y-auto min-h-0 p-4 space-y-3">
                    <!-- Liste des liens à ajouter ci-dessous -->

                </div>

                <div class="p-4">
                    <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="min-h-0 overflow-auto px-12 py-12 ">
                <div class="w-full ">
                    <slot />
                </div>
            </main>
        </div>
    </div>
</template>


<script setup lang="ts">

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