<!-- Layout for posts -->
<script lang="ts">
    import { type BlogData } from './+layout';

    export let data : BlogData

    const monthNames : string[] = ["January", "February", "March", "April", "May", "June",
                  "July", "August", "September", "October", "November", "December"];
    function humanDate(date : Date) : string {
        return `${date.getDate()} ${monthNames[date.getMonth()]} ${date.getFullYear()}`;
    }
</script>

<article>
    <div class="body">
        <header>
            <img id="blog-cover-img" src={data.post.cover_img} alt={data.post.cover_alt} />
            <h3 id="title">{data.post.title}</h3>
            <div class="dates">
                <span class="date">Created {humanDate(new Date(+data.post.creation_date * 1000))}</span>
                <span class="date">Last Modified {humanDate(new Date(+data.post.modification_date * 1000))}</span>
            </div>
        </header>
        <div class="content">
            <slot />
        </div>
    </div>
</article>


<style>
    article {
        margin-top: 25px;
        margin-inline: auto;
        max-width: 1000px;

        /* background: var(--background1); */
    }

    header {
        display: flex;
        flex-direction: column;

        margin-bottom: 50px;
    }

    #blog-cover-img {
        aspect-ratio: 16 / 9;
        max-width: 100%;

        border-radius: 0.5rem;
    }

    #title {
        font-family: var(--title-font);
        font-size: 36px;
        margin: 0;
    }

    .dates {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .date {
        color: var(--text3);
    }

    .body {
        margin-inline: auto;
        max-width: 1200px;
        padding: 25px;
    }

    .content {
        line-height: 2;
        font-size: 18px;
        text-rendering: optimizeLegibility;
    }

    /* CSS for posts - child rooutes. */
    img {
        width: 100%;
    }

    :global(a) {
        color: var(--text1);
        text-decoration-line: underline;
    }
</style>
