<script lang="ts">
	import { page } from "$app/state";
	import Search from "$icon/search";
	import X from "$icon/x";

	let form: HTMLFormElement;
	// seed from the url so the query (and the clear button) survive a submit
	let value = $state(page.url.searchParams.get("q") ?? "");

	const clear = () => {
		value = "";
		form.requestSubmit();
	};
</script>

<form bind:this={form} class="flex" method="GET">
	<!-- TODO: wire up search query submission -->
	<div class="relative flex w-full items-center">
		<Search
			class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
			aria-hidden="true"
		/>
		<input
			bind:value
			class="h-full w-full rounded border border-border-default bg-background-default py-1.5 pr-8 pl-8 text-sm outline-none focus:border-border-strong"
			type="text"
			name="q"
			placeholder="Search issues..."
			aria-label="Search issues"
		/>
		{#if value}
			<button
				type="button"
				onclick={clear}
				class="absolute right-2 flex items-center text-foreground-placeholder transition-colors hover:text-foreground-default"
				aria-label="Clear search"
			>
				<X class="size-4" aria-hidden="true" />
			</button>
		{/if}
	</div>
</form>
