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

	let { data } = $props();

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

<BranchTable
	ownerHandle={data.repo.ownerHandle}
	repoName={data.repo.name}
	branches={data.branches}
/>

{#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}
