---
/**
 * Posts listing page
 */
import { getEmDashCollection } from "emdash";

const { entries: posts } = await getEmDashCollection("posts");
---

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>Posts - EmDash Plugins Demo</title>
		<style>
			* {
				box-sizing: border-box;
				margin: 0;
				padding: 0;
			}
			body {
				font-family:
					system-ui,
					-apple-system,
					sans-serif;
				line-height: 1.6;
				color: #1a1a1a;
				max-width: 800px;
				margin: 0 auto;
				padding: 2rem;
			}
			h1 {
				font-size: 2rem;
				margin-bottom: 1rem;
			}
			.back {
				display: inline-block;
				margin-bottom: 1rem;
				color: #2563eb;
			}
			.post-list {
				list-style: none;
			}
			.post-item {
				border-bottom: 1px solid #e5e7eb;
				padding: 1.5rem 0;
			}
			.post-item:last-child {
				border-bottom: none;
			}
			.post-title {
				font-size: 1.25rem;
				margin-bottom: 0.5rem;
			}
			.post-title a {
				color: #2563eb;
				text-decoration: none;
			}
			.post-title a:hover {
				text-decoration: underline;
			}
			.post-meta {
				font-size: 0.875rem;
				color: #6b7280;
			}
			.empty {
				color: #6b7280;
				padding: 2rem;
				text-align: center;
				background: #f9fafb;
				border-radius: 8px;
			}
		</style>
	</head>
	<body>
		<a href="/" class="back">&larr; Back to home</a>
		<h1>Posts</h1>

		{
			posts.length === 0 ? (
				<div class="empty">
					<p>No posts yet.</p>
					<p>
						<a href="/_emdash/admin/content/posts/new">
							Create your first post
						</a>
					</p>
				</div>
			) : (
				<ul class="post-list">
					{posts.map((post) => (
						<li class="post-item">
							<h2 class="post-title">
								<a href={`/posts/${post.data.slug || post.id}`}>
									{post.data.title || "Untitled"}
								</a>
							</h2>
							<div class="post-meta">
								{post.data.status === "draft" && <span>Draft</span>}
							</div>
						</li>
					))}
				</ul>
			)
		}

		<footer
			style="margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; font-size: 0.875rem;"
		>
			<a href="/_emdash/admin" style="color: #2563eb;">Open Admin</a>
		</footer>
	</body>
</html>
