<script lang="ts">
	import { page } from '$app/state';
	import { resolve } from '$app/paths';
	import RepoCard from '$lib/components/repo/RepoCard.svelte';
	import EmptyState from '../EmptyState.svelte';
	import type { RepoCardData } from '../types';
	import Search from '$icon/search';
	import X from '$icon/x';

	let { repos }: { repos: RepoCardData[] } = $props();
	let searchQuery = $derived(page.url.searchParams.get('q') ?? '');
</script>

<section>
	<div class="mb-4">
		<form class="relative flex" method="GET">
			<input type="hidden" name="tab" value="repos" />
			<div class="relative flex flex-1">
				<input
					class="peer flex-1 rounded-l border border-border bg-surface py-1.5 pl-3 pr-10 outline-none focus:border-border-strong focus:ring-1 focus:ring-border-strong"
					type="text"
					name="q"
					value={searchQuery}
					placeholder="Search repositories..."
				/>
				<a
					href={resolve(`${page.url.pathname}?tab=repos` as '/')}
					class="absolute right-3 top-1/2 hidden -translate-y-1/2 text-fg-subtle hover:text-fg peer-[&:not(:placeholder-shown)]:block"
				>
					<X class="size-4" />
				</a>
			</div>
			<button
				type="submit"
				class="rounded-r border border-l-0 border-border bg-surface p-2 text-fg-subtle hover:bg-surface-hover hover:text-fg"
			>
				<Search class="size-4" />
			</button>
		</form>
	</div>

	{#if repos.length === 0}
		<EmptyState
			message={searchQuery ? `No repositories match "${searchQuery}".` : 'No repositories found.'}
		/>
	{:else}
		<div class="flex flex-col gap-4">
			{#each repos as repo (repo.rkey)}
				<RepoCard {repo} showOwner={false} />
			{/each}
		</div>
	{/if}
</section>
