<script>
    import DateTime from "./DateTime.svelte";
    import { page } from "$app/stores";
</script>

<svelte:head>
    {#if $page.data.header}
        <meta property="og:image" content={$page.data.header} />
        {#if $page.data.header_alt}
            <meta property="og:image:alt" content={$page.data.header_alt} />
        {/if}
        <meta property="og:description" content={$page.data.description} />
    {/if}
</svelte:head>

<header id="main-content">
    {#if $page.data.header}
        <figure>
            <img
                src={$page.data.header}
                alt={$page.data.header_alt || "header"}
                class="header"
            />
            {#if $page.data.header_caption}
                <figcaption>{$page.data.header_caption}</figcaption>
            {/if}
        </figure>
    {/if}

    <hgroup>
        <h1>{$page.data.title}</h1>
        <p>{$page.data.description}</p>
    </hgroup>

    {#if $page.data.published}
        <p>
            <small>
                Published:
                <DateTime datetime={$page.data.published} display="date" />
                {#if $page.data.edited}
                    &bull; Last edited:
                    <DateTime datetime={$page.data.edited} display="dateTime" />
                {/if}
            </small>
        </p>
    {/if}
</header>

<style>
    figure {
        margin: 0;
        width: 100%;
    }

    figcaption {
        font-size: small;
        text-align: center;
    }

    img.header {
        width: 100%;
    }
</style>
