<script lang="ts">
	import Navbar from "$lib/components/Navbar.svelte";
	import { toastStore } from "$lib/toast";
	import { Toast, ToastHeader, ToastBody } from "@sveltestrap/sveltestrap";
	import "../app.scss";
	import type { LayoutData } from "./$types";

	export let data: LayoutData;
</script>

<div class="d-flex flex-column min-vh-100">
	<Navbar user={data.user} />
	<div class="container mt-2 flex-grow-1">
		<slot />
		<div class="position-absolute top-0 start-50 translate-middle-x">
			{#each $toastStore as toast}
				<Toast class="mt-2">
					{#if toast.header}<ToastHeader>{toast.header}</ToastHeader>{/if}
					<ToastBody>{toast.body}</ToastBody>
				</Toast>
			{/each}
		</div>
	</div>

	<footer class="container pt-2 pb-4">
		<hr />
		<div class="flex flex-column flex-lg-row">
			<a href="/about/contact">Contact</a>
			·
			<a href="/about/tos">Terms of service</a>
			·
			<a href="/about/privacy">Privacy</a>
			·
			<a href="https://codeberg.org/starshine/catalogger" target="_blank">Source code</a>
		</div>
	</footer>
</div>
