<script context="module">
    import { onMount } from 'svelte';
    import { formatDate } from './datefmt.js';
    import { makeSlug } from '$lib/utils.js';
    
    import Toc from './Toc.svelte';
    import Link from './Link.svelte';
    export { Link as a };
</script>

<script>
    export let title, date;
    export const description = '';
    export const draft = false;
    export let toc = null;

    export let prev = null;
    export let next = null;
</script>

<style>
    .page {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, var(--content-width)) minmax(0, 1fr);

        padding: 0 0.5rem;
    }

    .title {
        grid-column: 2 / 3;
    }

    .left-gutter {
        grid-column: 1 / 2;
        justify-self: end;
    }

    .subtitle {
        font-size: 0.9em;
        font-style: italic;
        margin-top: -0.5rem;
    }

    .post {
        grid-column: 2 / 3;
    }

    .footer {
        grid-column: 2 / 3;
        margin-bottom: 2rem;
        display: flex;
    }

    hr {
        grid-column: 2 / 3;
        width: 100%;
        border-top: 1px solid hsl(0 0% 75%);
        border-bottom: none;
        margin: 2rem 0;
    }

    .footer a {
        display: flex;
        align-items: center;
        gap: 0.45em;

        font-size: 1rem;
        color: var(--content-color-faded);
        text-decoration: underline;
        text-underline-offset: 0.25em;
        text-decoration-color: transparent;

        transition: 150ms;
    }
    .footer a:hover {
        text-decoration-color: currentColor;
        text-decoration: underline;
    }

    .footer svg {
        width: 1em;
        transition: 150ms;
    }

    a.prev:hover svg {
        transform: translateX(-50%);
    }
    a.next:hover svg {
        transform: translateX(50%);
    }
</style>

<svelte:head>
    <title>{title}</title>
    <link rel="stylesheet" href="/prism-dracula.css" />
</svelte:head>

<div class="page">
    <div class="title">
        <h1 id="{makeSlug(title)}">{title}</h1>
        <p class="subtitle">{formatDate(date)}</p>
    </div>

    <div class="left-gutter">
        {#if toc?.length !== 0}
            <Toc items={toc} />
        {/if}
    </div>

    <div class="post">
        <slot></slot>
    </div>

    <hr>

    <div class="footer">
        {#if prev}
            <a href="/{prev}" class="prev" data-sveltekit-preload-data="hover">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
                </svg>
                Previous
            </a>
        {/if}

        {#if next}
            <!-- we use margin-left rather than justify-content so it works regardless of whether the "previous" link exists -->
            <a href="/{next}" class="next" style="margin-left: auto;" data-sveltekit-preload-data="hover">
                Next
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
                </svg>
            </a>
        {/if}
    </div>
</div>
