<script lang="ts">
	import type { LayoutData } from './$types';
	import { goto } from '$app/navigation';
	import SearchBox from '$lib/SearchBox.svelte';
	import '../app.css';

	export let data: LayoutData;

	async function onSubmit(evt: CustomEvent) {
		let { query } = evt.detail;
		// TODO: refactor to one source of truth for building query string parameters
		await goto(query ? `/?query=${query}` : '/', {
			invalidateAll: true
		});
	}
</script>

<svelte:head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<title>
		Barretthousen: "{data.query}" results
	</title>

	<meta name="description" content="Search results for '{data.query}'" />
</svelte:head>

<main class="flex flex-col w-full">
	<nav
		class="flex w-full bg-bh-gold text-bh-black fixed top-0 left-0 right-0"
		style="height: 80px;"
	>
		<img
			class="pr-5"
			style="width: 450px; height: 80px;"
			src="/logo_black_gold.svg"
			alt="BarrettHousen"
		/>
		<ul class="flex w-full py-3 items-center justify-between">
			<li class="flex grow justify-center">
				<span class="flex grow" style="max-width: 75%;">
					<SearchBox on:search={onSubmit} query={data.query} page={data.page} />
				</span>
			</li>
			<li class="px-6">
				<!-- <span>I want email alerts!</span> -->
			</li>
		</ul>
	</nav>
	<div class="flex flex-row flex-grow h-full" style="padding-top: 80px;">
		<div id="gutter" class="h-full" style="min-width: 195px; max-width: 195px;" />
		<section id="content" class="py-6 pl-4 grow border-l border-bh-gold" style="min-height: 100vh;">
			<slot />
		</section>
	</div>
	<footer
		class="flex justify-center bg-bh-gold text-bh-black w-full py-10 shadow-inner shadnow-md shadow-bh-black"
	>
		<p>
			We find great auctions of rare and one of a kind collectibles from around the web and compile
			them in one easy place.
		</p>
	</footer>
</main>
