{#each games_sellers as seller}
    <h4>
        <BggUser username={seller} />
        &nbsp;
        <a
            target="_blank"
            href={`https://boardgamegeek.com/geekmail/compose?touser=${seller}`}>
            <i>email</i></a>
        <span class="neighbourhood">
            {sellers[seller]?.neighbourhood ?? ''}
        </span>
        <span class="nbr-games"
            >{games.filter((game) => game.username == seller).length} game(s)</span>
    </h4>
    <div class="games">
        {#each games.filter((game) => {
            return game.username == seller;
        }) as game}
            {#if show_hidden || !game.is_hidden}
                <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>
            {/if}
        {/each}
    </div>
{/each}

<script>
    import { getContext, createEventDispatcher } from 'svelte';
    import Game from './Game.svelte';
    import BggUser from '$lib/components/BggUser.svelte';
    import u from '@yanick/updeep-remeda';
    import * as R from 'remeda';

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

    $: games_sellers = R.uniq(games.map(({ username }) => username).sort());

    let show_hidden = false;

    let search_text = '';

    const dispatch = createEventDispatcher();
    const toggle_visibility = (id) => dispatch('toggle_game_visibility', id);
    const toggle_cart = (id) => dispatch('toggle_cart', id);

    // add filter
    // add sort (user, game, price)
</script>

<style>
    h4 {
        align-items: baseline;
        display: flex;
    }
    .neighbourhood {
        margin-left: 2em;
    }
    .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;
    }
    .nbr-games {
        font-size: smaller;
        flex: 1;
        text-align: right;
    }
</style>