<script lang="ts">
	import FileTree from "$lib/components/repo/FileTree.svelte";
	import LastCommitPanel from "$lib/components/repo/LastCommitPanel.svelte";
	import Readme from "$lib/components/repo/Readme.svelte";
	import TreeHeader from "$lib/components/repo/TreeHeader.svelte";

	let { data } = $props();

	const repo = $derived(data.repo);
</script>

<section
	class="relative mx-auto w-full rounded bg-background-default px-6 py-4 text-foreground-default"
>
	<TreeHeader
		ownerHandle={repo.ownerHandle}
		repoName={repo.name}
		ref={data.ref}
		path={data.path}
		entries={data.files}
	/>

	{#if data.lastCommit}
		<LastCommitPanel ownerHandle={repo.ownerHandle} repoName={repo.name} commit={data.lastCommit} />
	{/if}

	<!-- one column, the commit and ref panels describe the repo not a folder -->
	<FileTree
		ownerHandle={repo.ownerHandle}
		repoName={repo.name}
		ref={data.ref}
		entries={data.files}
		path={data.path}
		withMessage
	/>
</section>

{#if data.readme}
	<Readme filename={data.readme.filename} contents={data.readme.contents} html={data.readmeHtml} />
{/if}
