<script lang="ts">
	import type { ActionData, PageServerData } from './$types';

	let { data, form }: { data: PageServerData; form: ActionData } = $props();
</script>

<svelte:head>
	<title>Link repository · Taskarr</title>
</svelte:head>

<main class="mx-auto min-h-screen max-w-3xl px-6 py-10">
	<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
		<h1 class="text-3xl font-bold text-slate-900">Link a repository</h1>
		<p class="mt-2 text-slate-600">Attach a GitHub repository to {data.project.name} using an installed app.</p>

		<form method="post" action="?/link" class="mt-6 grid gap-3">
			<select name="repository" class="rounded-md border border-slate-300 px-3 py-2">
				<option value="">Choose a repository</option>
				{#each data.repositoryCatalog as installation}
					<optgroup label={installation.accountLogin}>
						{#each installation.repositories as repo}
							<option
								value={JSON.stringify({
									installationId: installation.installationId,
									owner: repo.owner.login,
									repo: repo.name,
									fullName: repo.full_name,
									defaultBranch: repo.default_branch
								})}
							>
								{repo.full_name}
							</option>
						{/each}
					</optgroup>
				{/each}
			</select>
			<p class="text-sm text-slate-500">Repositories shown here come from the installed GitHub App.</p>
			{#if form?.error}
				<p class="text-sm text-red-600">{form.error}</p>
			{/if}
			<button class="w-fit rounded-md bg-blue-600 px-4 py-2 text-white">Link repository</button>
		</form>
	</div>
</main>
