<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 { page } from '$app/stores';

    $: isLoginPage = $page.url.pathname === '/login';
</script>

<Toast />

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

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

            <Footer />
        </ProtectedRoute>
    {/if}
</main>
