<script context="module">
 export async function load({ page, fetch, session, context }) {
     return {
         props: {
             theme: context.theme,
         },
     };
 }
</script>

<script>
 import {
     Alert,
     Badge,
     Icon,
 } from 'sveltestrap';

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

 import { my } from '../../stores/my.js';

 export let theme = null;
</script>

{#if theme && theme.exercices}
<div class="card niceborder text-indent mt-2 mb-4">

    <div class="card-body bg-dark text-light">
        <p class="mt-4 mx-3 card-text lead text-justify">{@html theme.headline}</p>
        <p class="mb-4 mx-3 card-text text-justify">{@html theme.intro}</p>
    </div>

    <ul class="list-group">
        {#each Object.keys(theme.exercices) as k, index}
            <li
                class="list-group-item"
                class:list-group-item-action={$my && $my.exercices[k]}
                on:click={goto(`/${theme.urlid}/${theme.exercices[k].urlid}`)}
            >
                <div class="row">
                    <div class="col-1" style="margin-top: -0.5rem; margin-bottom: -0.5rem; text-align: right; border-right: 5px solid #{$my && $my.exercices[k] && $my.exercices[k].solved ? '62c462' : 'aaa'}">
                    </div>
                    <div class="col-10">
                        <div style="position: absolute; margin-left: calc(var(--bs-gutter-x) * -.5 - 15px); margin-top: -0.5rem;">
	                    <svg style="height: 50px; width: 23px;">
	                        <rect
	                            style="fill:#{$my && $my.exercices[k] && (index < 1 || $my.exercices[Object.keys(theme.exercices)[index-1]].solved) ? '62c462' : 'aaa'}"
	                            width="5"
	                            height="30"
	                            x="10"
	                            y="0" />
	                        <path
	                            style="fill:#{$my && $my.exercices[k] ? ($my.exercices[k].solved ? '62c462' : (theme.exercices[k].curcoeff > 1.0 ? 'f89406' : '5bc0de')) : '555'}"
	                            d="m 22,20 a 9.5700617,9.5700617 0 0 1 -9.5690181,9.57006 9.5700617,9.5700617 0 0 1 -9.57110534,-9.56797 9.5700617,9.5700617 0 0 1 9.56692984,-9.57215 9.5700617,9.5700617 0 0 1 9.5731926,9.56588" />
	                    </svg>
                        </div>
                        {#each theme.exercices[k].tags as tag, idx}
	                    <Badge href="/tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge>
                        {/each}
	                <h5 class="fw-bold">
                            {#if $my && $my.exercices[k]}
	                        {theme.exercices[k].title}
                            {:else}
	                        <span style="white-space: nowrap">
	                            <Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
	                            {theme.exercices[k].title}
	                        </span>
                            {/if}
                            {#if theme.exercices[k].curcoeff > 1.0}
	                        <Icon name="gift" aria-hidden="true" title="Un bonus est actuellement appliqué lors de la résolution de ce défi" />
                            {/if}
	                </h5>
	                <p>{@html theme.exercices[k].headline}</p>
                    </div>
                    <div class="d-none d-md-block col-1">
                        {#if $my && $my.exercices[k]}
	                    <a class="float-right" href="{theme.urlid}/{theme.exercices[k].urlid}" style="font-size: 3rem">
                                <Icon name="chevron-right" aria-hidden="true" />
                            </a>
                        {:else}
	                    <span class="float-right" style="font-size: 3rem">
                                <Icon name="chevron-right" aria-hidden="true" />
                            </span>
                        {/if}
                    </div>
                </div>
            </li>
        {/each}
    </ul>

</div>
{:else}
    <Alert color="danger" fade={false}>
        <Icon name="dash-circle-fill" />
        Ce scénario n'existe pas.
    </Alert>
{/if}

<style>
 .list-group-item-action {
     cursor: pointer;
 }
</style>
