<script lang="ts">
	import ToastList from '$lib/components/ToastList.svelte';
	import Avatar from '$lib/components/Avatar.svelte';
	import NavBar from '$lib/components/NavBar.svelte';
	import NumberStatList from '$lib/components/NumberStatList.svelte';
	import SideBar from '$lib/components/SideBar.svelte';

	import '../../app.css';
	import { getPageIndex, pages } from '$lib/pages';
	import { onMount } from 'svelte';
	import { page } from '$app/stores';
	import { user } from '$lib/stores/auth';

	let { children } = $props();

	let selectedIndex = $state(0);

	$effect(() => {
		selectedIndex = getPageIndex($page.url.pathname);
	});
</script>

<ToastList />
<NavBar pageTitle={pages[selectedIndex].name}>
	{#snippet rightComponent()}
		<div class="flex items-center gap-4">
			<form>
				<input type="search" name="search" id="search" placeholder="Search..." />
			</form>
			<Avatar username={$user?.login ?? 'No auth'} url={$user?.avatar} />
		</div>
	{/snippet}
</NavBar>
<SideBar bind:selectedIndex />
<section class="dashboard">{@render children()}</section>

<style>
	section.dashboard {
		padding-left: 208px;
		padding-top: 72px;
		width: 100%;
		height: calc(100vh);
	}
</style>
