---
import type { CollectionEntry } from "astro:content";
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Main from "../components/Main.astro";
import Footer from "../components/Footer.astro";
import FormattedDate from "../components/FormattedDate.astro";

type Props = CollectionEntry<"blog">["data"];

const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
---

<html lang="en">
	<head>
		<BaseHead title={title} description={description} image={heroImage} />
		<!-- Katex -->
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css"
			integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV"
			crossorigin="anonymous"
		/>
		<script
			defer
			src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"
			integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8"
			crossorigin="anonymous"></script>
		<script
			defer
			src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
			integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05"
			crossorigin="anonymous"
			onload="renderMathInElement(document.body);"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
		<style>
			article {
				width: 100%;
			}

			h1::after {
				content: "";
				display: block;
				/* width: 100%; */
				height: 2px;
				background-color: var(--primary);
				margin: 0.5rem auto;
			}

			h2::after {
				content: "";
				display: block;
				/* width: 100%; */
				height: 2px;
				background-color: var(--primary);
				margin: 0.5rem auto;
			}

			.hero-image {
				width: 100%;
			}

			.hero-image img {
				display: block;
				margin: 0 auto;
				border-radius: 12px;
			}

			.prose {
				width: 720px;
				max-width: 100%;
				margin: auto;
				padding: 1em;
				color: var(--text);
			}

			.title {
				margin-bottom: 1em;
				padding: 1em 0;
				text-align: center;
				line-height: 1;
			}

			.title h1 {
				margin: 0 0 0.5em 0;
			}

			.date {
				margin-bottom: 0.5em;
				color: var(--text);
			}

			.last-updated-on {
				font-style: italic;
			}
		</style>
	</head>

	<body>
		<Header />
		<Main>
			<article>
				<div class="hero-image">
					{
						heroImage && (
							<img
								width={1020}
								height={510}
								src={heroImage}
								alt=""
							/>
						)
					}
				</div>
				<div class="prose">
					<div class="title">
						<div class="date">
							<FormattedDate date={pubDate} />
							{
								updatedDate && (
									<div class="last-updated-on">
										Last updated on{" "}
										<FormattedDate date={updatedDate} />
									</div>
								)
							}
						</div>
						<h1>{title}</h1>
					</div>
					<slot />
				</div>
			</article>
		</Main>
		<Footer />
	</body>
</html>
