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

<!-- todo: og and twitter card tags, the appview has repo/fragments/og.html and meta.html -->
<svelte:head>
	<title>{data.repo.ownerHandle}/{data.repo.name} &middot; Tangled</title>
	{#if data.repo.description}
		<meta name="description" content={data.repo.description} />
	{/if}
</svelte:head>

<section class="mx-auto w-full max-w-screen-lg py-6">
	<RepoHeader repo={data.repo} counts={data.counts} viewerStarRkey={data.viewerStarRkey} />
	<RepoTabs repo={data.repo} counts={data.counts} active={activeTab} />
	{@render children()}
</section>
