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

	let { data } = $props();

	const pageHref = (page: number) =>
		resolve(
			`/${data.repo.ownerHandle}/${data.repo.name}/tags${page > 1 ? `?page=${page}` : ""}` as "/"
		);
	const changePage = (page: number) => void goto(pageHref(page));
</script>

<TabPanel>
	<h2 class="mb-4 typography-paragraph-regular font-bold">Tags</h2>
	<div class="flex flex-col gap-12 py-2 md:gap-0">
		{#each data.tags as tag (tag.name)}
			<TagCard ownerHandle={data.repo.ownerHandle} repoName={data.repo.name} {tag} />
		{:else}
			<p class="p-4 text-center text-foreground-subtle">
				This repository does not contain any tags.
			</p>
		{/each}
	</div>
</TabPanel>

{#if data.pageCount > 1}
	<div class="mt-4 flex justify-center">
		<Pagination
			page={data.page}
			total={data.pageCount}
			labels
			onchange={changePage}
			class="gap-5"
		/>
	</div>
{/if}
