<script>
 import { goto } from '$app/navigation';

 import { teams } from '$lib/stores/teams';

 import {
     Container,
     Table,
 } from 'sveltestrap';

 teams.refresh();

 let query = "";
 const fields = ["name", "color", "active", "external_id"];

 function show(id) {
     goto("teams/" + id)
 }
</script>

<Container class="mt-2 mb-5">
    <h2>
        Équipes
    </h2>

    <p>
        <input type="search" class="form-control" placeholder="Filtrer" bind:value={query} autofocus>
    </p>
    <Table class="table-hover table-bordered table-striped">
        <thead class="thead-dark">
            <tr>
                {#each fields as field}
                    <th>
	                {field}
                    </th>
                {/each}
            </tr>
        </thead>
        <tbody>
            {#each $teams as team (team.id)}
                {#if team.name.indexOf(query) >= 0}
                    <tr on:click={() => show(team.id)}>
                        {#each fields as field}
                            <td class:text-end={field == "image"}>
                                {team[field]}
                            </td>
                        {/each}
                    </tr>
                {/if}
            {/each}
        </tbody>
    </Table>
</Container>
