<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}
</svelte:head>

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

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

    {#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>
    img.header {
        width: 100%;
    }
</style>
