<script lang="ts">
	import { resolve } from '$app/paths';
	import 'highlight.js/styles/github-dark.css';

	let { data } = $props();
</script>

<svelte:head><title>{data.blogArticle.title} - Blog</title></svelte:head>

<article class="mx-auto max-w-2xl px-4 py-8">
	<div class="mb-6 flex items-center justify-between">
		<h1 class="text-2xl font-bold">{data.blogArticle.title}</h1>
		{#if data.isAdmin}
			<a
				href={resolve('/blog/[slug]/edit', { slug: data.blogArticle.slug })}
				class="text-sm underline">Edit</a
			>
		{/if}
	</div>
	<p class="mb-6 text-sm text-gray-500">{data.blogArticle.createdAt?.toDateString()}</p>
	<div class="prose prose-neutral max-w-none">
		{@html data.contentHtml}
	</div>
</article>
