<article>
    {#if games.length == 0}
        <div class="medium-height middle-align center-align">
            <div class="center-align">
                <h4 class="center-align">Such restraint</h4>
                <h5>No games in cart (yet)</h5>
            </div>
        </div>
    {:else}
        <GameList
            {games}
            sellers={$sellers}
            on:toggle_cart={({ detail }) => all_games.toggle_cart(detail)} />
    {/if}
</article>

<script>
    import { getContext } from 'svelte';
    import GameList from './GameList.svelte';

    const all_games = getContext('games');
    const sellers = getContext('sellers');

    $: games = $all_games.filter(({ is_in_cart }) => is_in_cart);
</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>
