---
import { getCollection, render } from 'astro:content';
import FormattedDate from '../components/FormattedDate.astro';
import Layout from '../layouts/IndexLayout.astro';

const posts = await getCollection('releases');
posts.sort((a, b) => +b.data.date - +a.data.date);
---

<Layout>
	<main>
		<h1 class="page_title">Changelog</h1>
		<hr />
		<ul class="posts" transition:name="post">
			{
				posts.map((post) => (
					<li class="post">
						<div class="version_wrapper">
							<div class="version_info">
								<a href={`/releases/${post.id}`}>
									<div class="version_number">{post.data.versionNumber}</div>
									<FormattedDate class="date" date={post.data.date} />
								</a>
							</div>
						</div>
						<div class="content">
							{render(post).then(({ Content }) => (
								<Content />
							))}
						</div>
					</li>
				))
			}
		</ul>
	</main>
</Layout>