---
import type { CollectionEntry } from "astro:content";

import PageBase from "./PageBase.astro";
import Nav from "../components/Nav.astro";

type Props = Pick<CollectionEntry<"articles">, "id" | "data">;

const {
    data: { title, date, lastmod },
} = Astro.props;
---

<PageBase title={title}>
    <Nav />
    <h1 class="post-title">{title}</h1>
    <hr />
    <p class="post-info">
        <span class="created">{date.toLocaleString()}</span> |
        {
            lastmod && (
                <span class="last-updated">
                    Last updated: {lastmod.toLocaleString()}
                </span>
            )
        }
    </p>
    <slot />
</PageBase>

<style>
    .post-info {
        margin-block: 0;
        font-family: monospace;
        font-size: 0.95em;
        display: flex;
        flex-wrap: wrap;
        gap: 1em;

        & > .created {
            margin-inline-end: auto;
        }
    }
</style>