<script setup>
    import { onMounted, useSlots, computed } from 'vue';
    import { initFlowbite } from 'flowbite';
    import Toast from '@/Components/Toast.vue';

    const slots = useSlots();
    const hasHeader = computed(() => !!slots.header)

    onMounted(() => {
        initFlowbite();

        // Force light mode (dark mode not implemented, yet)
        // if the user has selected darkmode in the dashboard
        document.documentElement.classList.remove('dark');
        localStorage.setItem('dark', 'false');
    });
</script>

<template>
    <Toast :duration="8" />
    <!-- Warn for small screens -->
    <div class="lg:hidden text-center p-6 bg-yellow-100 text-yellow-800">
        Denne funksjonen er kun tilgjengelig på større skjermer (LG og opp).
    </div>

    <!-- Main layout for large screens -->
    <div class="hidden lg:block min-h-screen">
        <!-- Optional Sticky Header -->
         <header
            v-if="slots.header"
            class="fixed top-0 left-0 w-full z-30 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 px-6 py-2 shadow-sm"
         >
            <div class="max-w-screen-xl mx-auto flex justify-between items-center h-[48px]">
                <slot name="header" />
            </div>
         </header>

         <main :class="{ 'pt-[56px]': hasHeader }">
            <slot />
         </main>
    </div>
    
</template>

<style scoped>
/* Add any layout-specific styling here */
</style>