<script lang="ts" context="module">
	export const load: Load = async () => {
		const settings = await browseSettings();

		return {
			props: {
				header: settings.codeinjection_head,
				footer: settings.codeinjection_foot
			}
		};
	};
</script>

<script lang="ts">
	import { goto } from '$app/navigation';
	import { browseSettings } from '$lib/content/contentApi';

	import Base from '@damillora/plachta/components/Base/Base.svelte';
	import Footer from '@damillora/plachta/components/Footer.svelte/Footer.svelte';
	import Header from '@damillora/plachta/components/Header/Header.svelte';
	import NavDarkMode from '@damillora/plachta/components/Nav/NavDarkMode.svelte';
	import NavMenu from '@damillora/plachta/components/Nav/NavMenu.svelte';
	import NavSearch from '@damillora/plachta/components/Nav/NavSearch.svelte';
	import type { Load } from '@sveltejs/kit';

	const doSearch = (e: any) => {
		if (e.detail.query) {
			goto('/search?q=' + e.detail.query, { replaceState: true, keepfocus: true });
		} else {
			goto('/', { replaceState: true, keepfocus: true });
		}
	};

	export let header = '';
	export let footer = '';
</script>

<svelte:head>
	{@html header}
</svelte:head>
<Base>
	<Header>
		<svelte:fragment slot="title">
			<a href="/"> <strong>Damillora</strong>'s Virtual Memoir </a>
		</svelte:fragment>
		<svelte:fragment slot="nav">
			<NavMenu label="Home" url="/" />
			<NavDarkMode />
			<NavSearch on:search={doSearch} />
		</svelte:fragment>
	</Header>

	<slot />
	{@html footer}
	<Footer>
		<p>Copyright (c) 2021 Damillora</p>
	</Footer>
</Base>
