<script lang="ts">
	// the @ resets out of the profile shell, repo pages want their own header and
	// tabs instead of the profile card
	import { page } from "$app/state";
	import RepoHeader from "$lib/components/repo/RepoHeader.svelte";
	import RepoTabs from "$lib/components/repo/RepoTabs.svelte";

	let { children, data } = $props();

	const fullName = $derived(`${data.repo.ownerHandle}/${data.repo.name}`);
	const repoUrl = $derived(`${page.url.origin}/${fullName}`);
	const fullNameWithoutAt = $derived(fullName.replace(/^@/, ""));

	const activeTab = $derived.by(() => {
		const segment = page.route.id?.split("/")[3] ?? "";
		return ["issues", "pulls", "pipelines", "settings"].includes(segment) ? segment : "overview";
	});

	// the pull page runs a discussion rail down the full page height, so it places
	// the repo header and tabs inside its own column instead of taking them here
	const bare = $derived(page.route.id === "/[handle]/[repo]/pulls/[aturi]");

	// commit and pull pages break out of the reading column, everything else
	// stays capped
	const fullWidth = $derived(bare || (page.route.id ?? "").includes("/commit/"));
</script>

<!-- todo: og and twitter card tags, the appview has repo/fragments/og.html -->
<svelte:head>
	<title>{fullName} &middot; Tangled</title>
	<meta name="description" content={data.repo.description ?? "A repository on Tangled"} />
	<meta name="vcs:clone" content={repoUrl} />
	<meta name="forge:summary" content={repoUrl} />
	<meta name="forge:dir" content={`${repoUrl}/tree/{ref}/{path}`} />
	<meta name="forge:file" content={`${repoUrl}/blob/{ref}/{path}`} />
	<meta name="forge:line" content={`${repoUrl}/blob/{ref}/{path}#L{line}`} />
	<meta
		name="go-import"
		content={`tangled.sh/${fullNameWithoutAt} git https://tangled.sh/${fullName}`}
	/>
	<meta
		name="go-import"
		content={`tangled.org/${fullNameWithoutAt} git https://tangled.org/${fullName}`}
	/>
</svelte:head>

<section class={fullWidth ? "w-full px-2 py-6 sm:px-4" : "mx-auto w-full max-w-screen-lg py-6"}>
	{#if !bare}
		<RepoHeader repo={data.repo} counts={data.counts} viewerStarRkey={data.viewerStarRkey} />
		<RepoTabs repo={data.repo} counts={data.counts} active={activeTab} />
	{/if}
	{@render children()}
</section>
