<script lang="ts">
	import { resolve } from "$app/paths";
	import { getAuth } from "$lib/auth.svelte";
	import type { RepoInfo } from "./types";

	interface Props {
		repo: RepoInfo;
	}

	let { repo }: Props = $props();

	const auth = getAuth();
	const isOwner = $derived(auth.currentDid === repo.ownerDid);
	// same host rewrite as the clone urls
	const sshHost = $derived(
		(repo.knot === "knot1.tangled.sh" ? "tangled.org" : repo.knot)
			.replace(/^[a-z]+:\/\//, "")
			.split(/[:/]/)[0]
	);
	const remote = $derived(`git@${sshHost}:${repo.repoDid ?? `${repo.ownerHandle}/${repo.name}`}`);
</script>

{#snippet bullet(n: number)}
	<span
		class="mr-2 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-background-inset align-middle font-mono text-xs"
	>
		{n}
	</span>
{/snippet}

{#if isOwner}
	<div class="flex w-full place-content-center">
		<div class="flex w-fit flex-col gap-4 py-6 text-sm">
			<p>This is an empty repository. To get started:</p>
			<p>
				{@render bullet(1)}First, generate a new
				<a
					href="https://git-scm.com/book/en/v2/Git-on-the-Server-Generating-Your-SSH-Public-Key"
					rel="noopener"
					class="underline">SSH key pair</a
				>.
			</p>
			<p>
				{@render bullet(2)}Then add the public key from the
				<a href={resolve("/settings/keys")} class="underline">keys page</a> in your settings.
			</p>
			<p>
				{@render bullet(3)}Configure your remote to
				<code class="rounded bg-background-inset px-1 font-mono">{remote}</code>
			</p>
			<p>{@render bullet(4)}Push!</p>
		</div>
	</div>
{:else}
	<p class="py-6 text-center text-foreground-subtle">This is an empty repository.</p>
{/if}
