<h1>Ottawa board games for sale</h1>

<p>This is a list of games for sale or trade of people living in the Ottawa
    region, taken from their profiles on 
        <a href="https://boardgamegeek.com">Board Game Geek</a>.
</p>

 <header >
            <Search {handler} />
 </header>

<table>
    <thead>
        <tr>
            <th>user</th>
            <th></th>
            <th>game</th>
            <th></th>
            <th>notes</th>
            <th>price</th>
        </tr>
    </thead>
    <tbody>
        {#each $rows as row}
            <tr>
                <td><a href={`https://boardgamegeek.com/user/${row.username}`}>{row.username}</a></td>
                <td><a
                    href={`https://boardgamegeek.com/geekmail/compose?touser=${row.username}`}>bgg
                    mail</a></td>
                <td> {row.name}</td>
                <td>
                    <img src={row.thumbnail} height="60"/>
                </td>
                <td>{row.notes}</td>
                <td>{row.price??''}</td>
            </tr>
        {/each}
    </tbody>
</table>


<script> 
    // TODO BGG mail the user 
    // TODO add cart
    // prettify
    import { DataHandler, Search } from '@vincjo/datatables'

    export let data;

    const handler = new DataHandler(data.games, { rowsPerPage: 50 })
    const rows = handler.getRows()
</script>
