<script lang="ts">
	const { data } = $props();
	import Postgrid from './grid.svelte'

	import { base } from '$app/paths';
	import { PUBLIC_HOSTNAME } from '$env/static/public';
</script>

<svelte:head>
	<title>記事一覧 | moris.day Blog</title>
	<link rel="canonical" href="https://{PUBLIC_HOSTNAME}{base}/0/" />
</svelte:head>


<div class='contain'>
	<h1 style="margin-top:0; font-weight:500;">Posts <span style="font-size:1.6rem; opacity:0.7">#page{data.pageNo}</span></h1>
	<div class="posts">
		{#each data.posts as post}
			<article class:unpublished={!post.metadata.published}>
				<a style='text-decoration:none; color:currentColor;' href="../post/{post.postId}" tabindex="0">
					<Postgrid {...post.metadata}></Postgrid>
				</a>
			</article>
		{/each}
		{#if data.posts.length%4}
			{#each Array(4-data.posts.length%4) as i}
				<div class="blank"></div>
			{/each}
		{/if}
	</div>

	<div class='paging'>
		<a href={data.pageNo==0? "":`../${Number(data.pageNo)-1}`} style:visibility={data.pageNo==0? 'hidden':''}>＜</a>
		<span>{data.pageNo}</span><span>/</span><span>{data.lastPage}</span>
		<a href={data.pageNo==data.lastPage? "":`../${Number(data.pageNo)+1}`} style:visibility={data.pageNo==data.lastPage? 'hidden':''}>＞</a>
	</div>
</div>


<style>
	.contain {
		margin-inline: auto;
		padding: 2vw 3vw;
		max-width: 1599px;
	}

	.posts {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-template-rows: max-content;
		gap: 25px;
		justify-content: center;
	}
	article {
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 0 6px #0001;

		&.unpublished {
			border: solid red 3px;
		}
	}

	.paging {
		display: flex;
		justify-content: center;
		column-gap: 8px;
		margin: 20px;
		font-size: 1.5em;
		font-weight: 550;
		& a {
			color: var(--theme-color);
		}
	}
</style>