<script lang="ts">
  import '../app.css';
  import Header from "$lib/header.svelte";
  import favicon from '$lib/assets/favicon.svg';
  import { page } from '$app/state';

  let { children } = $props();

  const showHeader = $derived(
    !['auth', 'forgot-password'].some(p => page.url.pathname.startsWith(`/${p}`)) &&
    !/^\/decks\/.+/.test(page.url.pathname)
  );
</script>

<svelte:head>
  <title>WikiTCG</title>
  <link rel="icon" href={favicon} />
</svelte:head>

<div class="layout">
  {#if showHeader}
    <Header />
  {/if}
  <div class="page-area">
    {@render children()}
  </div>
</div>

<style>
  .layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
  }

  .page-area {
    flex: 1;
    overflow: hidden;
    min-height: 0;
  }
</style>
