<div
    transition:slide={{ delay: 250, duration: 300 }}
    class:hidden={is_hidden}
    class="game">
    <div class="grid top-align">
        <a
            class="s12 m2"
            target="_blank"
            href={`https://boardgamegeek.com/boardgame/${bgg_id}`}>
            <img alt="" loading="lazy" src={thumbnail} height="80" /></a>
        <div class="grid s12 m10">
            <div class="s8 left-align">
                <strong>
                    <a
                        class="game-desc"
                        target="_blank"
                        href={`https://boardgamegeek.com/boardgame/${bgg_id}`}>
                        {name}</a>
                </strong>
            </div>
            <div class="s3">
                <div>
                    <a
                        target="_blank"
                        href={`https://boardgamegeek.com/collection/user/${username}?trade=1&subtype=boardgame&ff=1`}
                        >{username}</a>
                    &nbsp;
                    <a
                        target="_blank"
                        href={`https://boardgamegeek.com/geekmail/compose?touser=${username}`}>
                        <i>email</i></a>
                </div>
                <div class="neighbourhood">
                    {seller?.neighbourhood ?? ''}
                </div>
            </div>
            <div class="s1 right-align">
                {price ? '$' + price : ''}
            </div>
            <div class="notes s8">
                {notes}
            </div>
            <div class="s3 updated-at">
                {#if updated_at}
                    {pretty_date(updated_at)}
                {/if}
            </div>
            <div class="s1">
                <div>
                    <button
                        class="transparent round"
                        title="hide game"
                        on:click={toggle_game_visibility}
                        >{#if is_hidden}<i>visibility_off</i>{:else}
                            <i>visibility</i>
                        {/if}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    import { createEventDispatcher } from 'svelte';
    import { slide, fade } from 'svelte/transition';

    export let username = '';
    export let name = '';
    export let is_hidden = false;
    export let bgg_id = '';
    export let thumbnail = '';
    export let seller = {};
    export let price = null;
    export let notes = '';
    export let updated_at = null;

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

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

    const dispatch = createEventDispatcher();
    const toggle_game_visibility = () => dispatch('toggle_visibility');
</script>

<style>
    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%;
    }
</style>
