<!-- [DEF:layout:Module] -->
<script>
    import '../app.css';
    import Navbar from '../components/Navbar.svelte';
    import Footer from '../components/Footer.svelte';
    import Toast from '../components/Toast.svelte';
    import ProtectedRoute from '../components/auth/ProtectedRoute.svelte';
    import Breadcrumbs from '$lib/components/layout/Breadcrumbs.svelte';
    import Sidebar from '$lib/components/layout/Sidebar.svelte';
    import TopNavbar from '$lib/components/layout/TopNavbar.svelte';
    import TaskDrawer from '$lib/components/layout/TaskDrawer.svelte';
    import { page } from '$app/stores';
    import { sidebarStore } from '$lib/stores/sidebar.js';

    $: isLoginPage = $page.url.pathname === '/login';
    $: isExpanded = $sidebarStore?.isExpanded || true;
</script>

<Toast />

<main class="bg-gray-50 min-h-screen">
    {#if isLoginPage}
        <div class="p-4">
            <slot />
        </div>
    {:else}
        <ProtectedRoute>
            <!-- Sidebar -->
            <Sidebar />

            <!-- Main content area with TopNavbar -->
            <div class="flex flex-col {isExpanded ? 'ml-60' : 'ml-16'} transition-all duration-200">
                <!-- Top Navigation Bar -->
                <TopNavbar />
                <!-- Breadcrumbs -->
                <Breadcrumbs />

                <!-- Page content -->
                <div class="p-4 pt-20">
                    <slot />
                </div>

                <!-- Footer -->
                <Footer />
            </div>

            <!-- Global Task Drawer -->
            <TaskDrawer />
        </ProtectedRoute>
    {/if}
</main>
<!-- [/DEF:layout:Module] -->
