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

 import { auth } from '$lib/stores/auth';
 import { themes } from '$lib/stores/themes';

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

 themes.refresh();

 let query = "";
 const fields = ["name", "authors", "headline", "image"];

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

<Container class="mt-2 mb-5">
    {#if $auth && $auth.is_manager}
        <ButtonGroup
            class="float-end"
        >
            <Button
                href="export"
            >
                Exporter toutes les remarques
            </Button>
            <Button
                href="api/qa/export.json"
                color="dark"
                download
            >
                JSON
            </Button>
        </ButtonGroup>
    {/if}
    <h2>
        Scénarios
    </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 $themes as theme (theme.id)}
                {#if theme.name.indexOf(query) >= 0 || theme.authors.indexOf(query) >= 0 || theme.intro.indexOf(query) >= 0}
                    <tr on:click={() => show(theme.id)}>
                        {#each fields as field}
                            <td class:text-end={field == "image"}>
                                {#if field == "image"}
                                    <img src={"../files" + theme[field]} alt="Image du scénario" height="120">
                                {:else}
                                    {@html theme[field]}
                                {/if}
                            </td>
                        {/each}
                    </tr>
                {/if}
            {/each}
        </tbody>
    </Table>
</Container>
