<header>
    <nav>
        <h5 class="max left-align">Ottawa board games for sale and trade</h5>
        <a class="button circle transparent" href="/about">
            <i>question_mark</i>
        </a>
    </nav>
</header>

<article>
    {#await data.games}
        <div class="medium-height middle-align center-align">
            <div class="center-align">
                <progress class="circle"></progress>

                <h5>gathering games...</h5>
            </div>
        </div>
    {:then games}
        <GameList {games} />
    {/await}
</article>

<script>
    // TODO hide games I'm not interested in
    // TODO add cart
    // TODO prettify via beercss
    import GameList from './GameList.svelte';

    export let data;

    function pretty_date(date) {
        if (!date) return '';

        return date.replace(/T.*/, '');
    }
</script>

<style>
    p {
        font-size: var(--font-size-10);
        max-width: 60em;
        text-align: justify;
        margin-left: 3em;
        margin-right: 3em;
    }
    a {
        color: var(--primary);
        text-decoration: underline;
    }
    .game-cell {
        display: flex;
    }
    .game-cell > * {
        display: block;
    }
    .game-desc {
        flex: 1;
    }
    td {
        font-size: var(--font-size-10);
    }

    @media screen and (max-width: 730px) {
        h1 {
            font-size: var(--font-size-12);
        }
        p {
            font-size: inherit;
            margin-left: 1em;
            margin-right: 1em;
        }
    }
</style>
