<script lang="ts">
	import { DoubleArrowLeft, DoubleArrowRight, ChevronLeft, ChevronRight } from 'svelte-radix';
	import type { Post } from '$lib/types'
 	import PostHeader from './PostHeader.svelte';

	export let posts: Post[];
	// The page navigation bar will not show if these numbers are not provided.
	export let maxPageN: number = 0;
	export let pageN: number = 0;

	const disableLinkPrev = pageN == 1;
	const disableLinkNext = pageN == maxPageN;
	const firstPageLink = "/post";
	const prevLink = pageN <= 2 ? firstPageLink : `/page/${pageN - 1}`;
</script>

<ul id="catalog" class="content">
	{#each posts as post}
		<li>
			<PostHeader {post}/>
		</li>
	{/each}
</ul>
<!-- Navigation bar -->
{#if maxPageN}
	<hr class="separator" />
	<div id="page-navigator">
		<a
			aria-label="First Page"
			class="nav-link icon"
			class:disabled-link={disableLinkPrev}
			href={firstPageLink}><DoubleArrowLeft /></a>
		<a
			aria-label="Prev Page"
			class="nav-link icon"
			class:disabled-link={disableLinkPrev}
			href={prevLink}><ChevronLeft /></a>
		<div id="page-map">
			<p id="page-num">{pageN}/{maxPageN}</p>
		</div>
		<a
			aria-label="Next Page"
			class="nav-link icon"
			class:disabled-link={disableLinkNext}
			href="/page/{Math.min(maxPageN, pageN+1)}"><ChevronRight /></a>
		<a
			aria-label="Last Page"
			class="nav-link icon"
			class:disabled-link={disableLinkNext}
			href="/page/{maxPageN}"><DoubleArrowRight /></a>
	</div>
{/if}

<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>
