<script lang="ts">
	import { goto } from "$app/navigation";
	import { page } from "$app/state";
	import { resolve } from "$app/paths";
	import IssueForm from "$lib/components/repo/issues/IssueForm.svelte";
	import TabPanel from "$lib/components/ui/TabPanel.svelte";

	let { data } = $props();

	const base = $derived(`/${data.repo.ownerHandle}/${data.repo.name}/issues`);

	const markup = $derived({
		repo: `${data.repo.ownerHandle}/${data.repo.name}`,
		ref: data.repo.defaultBranch,
		host: page.url.host,
		camo: data.publicConfig?.camoEnabled
	});

	// no issue detail route yet, so land back on the list after creating
	const handleSaved = async () => {
		await goto(resolve(base as "/"));
	};

	const handleCancel = () => {
		void goto(resolve(base as "/"));
	};
</script>

<svelte:head>
	<title>New issue · {data.repo.ownerHandle}/{data.repo.name} · Tangled</title>
</svelte:head>

<TabPanel class="py-6">
	<h1 class="mb-4 typography-heading-4 font-bold text-foreground-default">Create a new issue</h1>
	<IssueForm
		{markup}
		repoDid={data.repo.repoDid ?? ""}
		onsaved={handleSaved}
		oncancel={handleCancel}
	/>
</TabPanel>
