<script lang="ts">
	import EmptyState from "$lib/components/ui/EmptyState.svelte";
	import SearchBar from "../SearchBar.svelte";
	import SearchSidebar from "../SearchSidebar.svelte";
	import { searchUrl } from "../SearchTabs.svelte";

	let { query }: { query: string } = $props();

	let draft = $derived(query);
</script>

<svelte:head>
	<title>Search &middot; Tangled</title>
</svelte:head>

<div class="mx-auto flex w-full max-w-screen-lg flex-col gap-4 px-4 py-8">
	<h1 class="mb-4 px-2 text-2xl font-semibold">Search</h1>
	<div class="grid grid-cols-1 gap-4 px-2 md:grid-cols-4">
		<div class="col-span-1 space-y-4 md:col-span-3">
			<SearchBar type="repo" bind:query={draft} placeholder="Search repositories..." />

			<EmptyState message="Repository search is coming soon.">
				<a href={searchUrl("code", draft)} class="underline">Search code instead</a>
			</EmptyState>
		</div>

		<SearchSidebar bind:query={draft} active="repo" />
	</div>
</div>
