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

 import {
     Badge,
     Card,
     CardBody,
     Col,
     Row,
 } from '@sveltestrap/sveltestrap';

 let themesP = fetch('api/qa/export.json').then((res) => res.json())

 function state2Color(state) {
     if (state === "timer") {
         return "info";
     } else if (state === "ok") {
         return "success";
     } else if (state.startsWith("issue")) {
         return "danger";
     } else {
         return "warning";
     }
 }
</script>

<div
    class="d-flex flex-fill"
    style="overflow-y: auto"
>
    {#await themesP then themes}
    <Row
        style={'min-width:'+15*Object.keys(themes).length + 'vw'}
    >
        {#each Object.keys(themes) as tname}
            <Col style="border-right: 1px solid lightgray">
            <h3
                class="text-center py-3 mb-3"
                style="border-bottom: 2px solid black"
            >
                {tname}
            </h3>
            {#if themes[tname].exercices}
                {#each themes[tname].exercices as exercice}
                    {#if exercice.reports}
                        {#each exercice.reports as report}
                            <Card
                                class="mb-3"
                                color={state2Color(report.report.state)}
                                style="cursor: pointer"
                                on:click={() => goto(`exercices/${exercice.exercice.id}/${report.report.id}`)}
                            >
                                <CardBody class="p-2">
                                    {report.report.subject}
                                    {#if report.comments}
                                        <Badge
                                            class="float-end"
                                        >
                                            {report.comments.length}
                                        </Badge>
                                    {/if}
                                </CardBody>
                            </Card>
                        {/each}
                        <hr />
                    {/if}
                {/each}
            {/if}
            </Col>
        {/each}
    </Row>
    {/await}
</div>
