<div class="games">
    {#each games as game}
        <Game
            on:toggle_visibility={() => toggle_visibility(game.id)}
            on:toggle_cart={() => toggle_cart(game.id)}
            {...game}
            seller={sellers[game.username]} />
        <div class="medium-divider"></div>
    {/each}
</div>

<script>
    import { getContext, createEventDispatcher } from 'svelte';
    import Game from './Game.svelte';

    export let games = [];
    export let sellers = {};

    const toggle_cart = (id) => dispatch('toggle_cart', id);
</script>

<style>
    .games {
        margin-top: 3em;
    }
    a {
        color: var(--primary);
        text-decoration: underline;
    }
    .grid {
        margin-right: 2em;
        font-size: var(--font-size-10);
    }
    .notes {
        margin-top: 1em;
        margin-left: 1em;
    }
    .updated-at {
        font-size: smaller;
        text-align: left;
    }
    .updated-at::before {
        content: 'last update: ';
    }
    .neighbourhood {
        font-size: smaller;
    }
    .hidden {
        opacity: 60%;
    }
    .switch span {
        font-size: var(--font-size-10);
        padding-left: 1em;
    }
    .options {
        display: flex;
        flex-direction: row-reverse;
    }
    .options > div {
        margin-right: 1em;
    }
</style>
