<script>
 import {
     Alert,
     Card,
     CardBody,
     CardTitle,
     Col,
     Container,
     Icon,
     Row,
 } from '@sveltestrap/sveltestrap';

 import { goto } from '$app/navigation';

 import { themes } from '$lib/stores/themes.js';

 import CardTheme from '$lib/components/CardTheme.svelte';

 export let data;

 let exercices = [];
 $: {
     let tmp_exercices = [];

     for (let k in $themes) {
         const th = $themes[k];
         for (const ex of th.exercices) {
             if (ex.tags.indexOf(data.tag) >= 0) {
                 tmp_exercices.push({theme: th, exercice: ex, index: k + "," + ex});
             }
         }
     }

     exercices = tmp_exercices;
 }

 // Override theme color
 document.body.style.backgroundColor = "";
</script>

<Container class="mt-3">
<h1 class="text-dark">
    Challenges <em>{data.tag}</em>
</h1>

{#if exercices.length}
<Row cols="3">
    {#each exercices as {theme, exercice, index} (index)}
    <Col class="mb-3">
        <CardTheme
            theme={theme}
            exercice={exercice}
            on:click={goto(`${theme.urlid}/${exercice.urlid}`)}
        />
    </Col>
    {/each}
</Row>
{:else}
<p class="lead">
    Il n'y a aucun défi sur ce thème.
</p>
{/if}
</Container>
