<!-- [DEF:frontend.src.routes.+layout:Module] -->
<!--
@TIER:      STANDARD
@SEMANTICS: layout, root, navigation, sidebar, toast
@PURPOSE:   Root layout component that provides global UI structure (Sidebar, Navbar, Footer, TaskDrawer, Toasts).
@LAYER:     UI (Layout)
@RELATION:  DEPENDS_ON -> Sidebar
@RELATION:  DEPENDS_ON -> TopNavbar
@RELATION:  DEPENDS_ON -> Footer
@RELATION:  DEPENDS_ON -> Toast
@RELATION:  DEPENDS_ON -> ProtectedRoute
@RELATION:  DEPENDS_ON -> TaskDrawer
@INVARIANT: All pages except /login are wrapped in ProtectedRoute.
-->

<!-- [DEF:layout:Module] -->
<!--
@TIER: STANDARD
@SEMANTICS: app-layout, auth-gating, navigation-shell
@PURPOSE: Bind global layout shell and conditional login/full-app rendering.
@LAYER: UI
@RELATION: BINDS_TO -> frontend.src.lib.components.layout.Sidebar
@INVARIANT: Login route bypasses shell; all other routes are wrapped by ProtectedRoute.
-->
<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 min-h-screen {isExpanded ? 'md:ml-60' : 'md:ml-16'} transition-all duration-200">
                <!-- Top Navigation Bar -->
                <TopNavbar />
                <!-- Breadcrumbs -->
                <div class="mt-16 pt-3">
                    <Breadcrumbs />
                </div>

                <!-- Page content -->
                <div class="p-4 flex-grow">
                    <slot />
                </div>

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

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