<script lang="ts">
	import type { PageData } from './$types';
	export let data: PageData;
	const { posts, pageN, maxPageN } = data;
	import siteMetadata from '$content/metadata.json';

	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight } from 'svelte-radix';
	import PostHeader from '$lib/components/PostHeader.svelte';

	const disableLinkPrev = pageN == 1;
	const disableLinkNext = pageN == maxPageN;
</script>

<svelte:head>
	<title>Page {pageN} | {siteMetadata.blogName}</title>
</svelte:head>

<hr class="separator" />
<ul id="catalog" class="content">
	{#each posts as post}
		<li>
			<PostHeader post={post}/>
		</li>
	{/each}
</ul>
<hr class="separator" />
<div id="page-navigator">
	<a
		class="nav-link icon"
		class:disabled-link={disableLinkPrev}
		href="/page/1"><DoubleArrowLeft /></a>
	<a
		class="nav-link icon"
		class:disabled-link={disableLinkPrev}
		href="/page/{Math.max(1, pageN-1)}"><ChevronLeft /></a>
	<div id="page-map">
		<p id="page-num">{pageN}/{maxPageN}</p>
	</div>
	<a
		class="nav-link icon"
		class:disabled-link={disableLinkNext}
		href="/page/{Math.min(maxPageN, pageN+1)}"><ChevronRight /></a>
	<a
		class="nav-link icon"
		class:disabled-link={disableLinkNext}
		href="/page/{maxPageN}"><DoubleArrowRight /></a>
</div>

<style>
	#page-navigator {
		display: flex;
		flex-direction: horizontal;
		justify-content: space-between;
		margin: 1em auto 1em auto;
		width: 80%;
		align-items: center;
	}
	#page-map {
		display: inline-block;
	}
	#page-num {
		color: rgb(128,128,128);
	}
</style>
