<script lang="ts">
	import type { Snippet } from "svelte";
	import SearchSidebar from "#lib/components/search/SearchSidebar.svelte";

	interface Props {
		title: string;
		query: string;
		active: string;
		bar: Snippet;
		aside?: Snippet;
		children: Snippet;
	}

	let { title, query, active, bar, aside, children }: Props = $props();
</script>

<div class="mx-auto flex w-full max-w-page flex-col gap-md px-xs py-md md:px-md md:py-2xl">
	<h1 class="sr-only">{title}</h1>
	<div class="grid grid-cols-1 gap-md md:grid-cols-4 md:grid-rows-[auto_1fr] md:px-xs">
		<div class="md:col-span-3">
			{@render bar()}
		</div>
		<SearchSidebar
			{query}
			{active}
			class="md:col-start-4 md:row-span-2 md:row-start-1"
			children={aside}
		/>
		<div class="space-y-md md:col-span-3">
			{@render children()}
		</div>
	</div>
</div>