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

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

 import { fieldsExercices, getExercices } from '$lib/exercices';

 let query = "";

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

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

    {#await getExercices()}
        <div class="d-flex justify-content-center">
            <Spinner size="lg" />
        </div>
    {:then exercices}
        <p>
            <input type="search" class="form-control form-control-sm" placeholder="Search" bind:value={query} autofocus>
        </p>
        <Table class="table-hover table-bordered table-striped table-sm">
            <thead class="thead-dark">
                <tr>
                    {#each fieldsExercices as field}
	                <th>
	                    {field}
	                </th>
                    {/each}
                </tr>
            </thead>
            <tbody>
                {#each exercices as exercice (exercice.id)}
                    {#if exercice.title.indexOf(query) >= 0}
                        <tr on:click={() => show(exercice.id)}>
                            {#each fieldsExercices as field}
	                        <td>
                                    {@html exercice[field]}
                                    {#if field == "title" && exercice.wip}
                                        <Icon name="cone-striped" />
                                    {/if}
                                </td>
                            {/each}
                        </tr>
                    {/if}
                {/each}
            </tbody>
        </Table>
    {/await}
</Container>
