<script lang="ts">
	import './layout.css';
	import favicon from '$lib/assets/favicon.svg';
	import type { LayoutData } from './$types';

	let { children, data }: { children: import('svelte').Snippet; data: LayoutData } = $props();
</script>

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

<div class="header goldman flex h-15 w-full">
	<a
		class="align-text-middle justify-left mx-3 my-1 h-auto content-center rounded-sm border-2
		border-solid border-red-500 px-2"
		href="/">home</a
	>
	<div class="w-full"></div>

	{#if data.user?.role === 'admin'}
		<a
			class="align-text-middle justify-right mx-3 my-1 h-auto content-center rounded-sm border-2
			border-solid border-red-500 px-2"
			href="/ledger">ledger</a
		>
		<a
			class="align-text-middle justify-right mx-3 my-1 h-auto content-center rounded-sm border-2
			border-solid border-red-500 px-2"
			href="/import-csv">import</a
		>
		<a
			class="align-text-middle justify-right mx-3 my-1 h-auto content-center rounded-sm border-2
			border-solid border-red-500 px-2"
			href="/settings">settings</a
		>
	{/if}
	{#if data.user}
		<a
			class="align-text-middle justify-right mx-3 my-1 h-auto content-center rounded-sm border-2
	border-solid border-red-500 px-2"
			href="/login">logout</a
		>
	{:else}
		<a
			class="align-text-middle justify-right mx-3 my-1 h-auto content-center rounded-sm border-2
			border-solid border-red-500 px-2"
			href="/login">login</a
		>
	{/if}
</div>

{@render children()}

<style>
	.header {
		background-color: var(--ctp-mocha-crust);
	}
</style>
