<script>
 import {
     Badge,
     Button,
     Card,
     CardBody,
     CardTitle,
     Col,
     Icon,
     Row,
 } from 'sveltestrap';

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

 import { current_theme } from '$lib/stores/themes';
 import { my } from '$lib/stores/my.js';
</script>

<Card class="bg-dark niceborder text-indent mt-2 mb-4">

    <Row>
    <Col lg={6} xl={7}>
    <CardBody class="text-light">
        <div style="position: relative; display: inline-block;">
            {#if $current_theme.locked}
                <div style="position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; right: 0;" class="d-flex justify-content-center align-items-center">
                    <div style="transform: rotate(-25deg)">
                        <div class="display-3 font-weight-bolder border border-danger text-danger px-3 py-1" style="opacity: 0.5; border-radius: 20px; border-width: 5px !important; font-family: 'Courier New'">
                            CONFIDENTIEL
                        </div>
                    </div>
                </div>
            {/if}
            <Row>
                <Col>
                <p class="mt-4 mx-3 card-text lead text-justify">{@html $current_theme.headline}</p>
                <p class="mb-4 mx-3 card-text text-justify">{@html $current_theme.intro}</p>
                </Col>
                {#if $current_theme.partner_txt || $current_theme.partner_img || $current_theme.partner_href}
                    <Col md="2" lg="3" class="d-none d-md-block">
                    <Card class="pt-3 px-3">
                        {#if $current_theme.partner_img}
                            <img src="{$current_theme.partner_img}" alt="En-tête du scénario" class="card-img-top">
                        {/if}
                        {#if $current_theme.partner_txt || $current_theme.partner_href}
                            <CardBody class="p-0 mt-3">
                                {#if $current_theme.partner_txt}
                                    {@html $current_theme.partner_txt}
                                {/if}
                                {#if $current_theme.partner_href}
                                    <Button tag="a" color="primary" href="{$current_theme.partner_href}">
                                        Visiter le site
                                    </Button>
                                {/if}
                            </CardBody>
                        {/if}
                    </Card>
                    </Col>
                {/if}
            </Row>
        </div>
    </CardBody>
    </Col>
    <Col lg={6} xl={5}>
    {#if $current_theme.exercices && $current_theme.exercices.length}
    <ul class="list-group">
        {#each $current_theme.exercices as exercice, index}
            <li
                class="list-group-item"
                class:list-group-item-action={$my && $my.exercices[exercice.id]}
                on:click={goto(`${$current_theme.urlid}/${exercice.urlid}`)}
                on:keypress={goto(`${$current_theme.urlid}/${exercice.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[exercice.id] && $my.exercices[exercice.id].solved_rank ? '62c462' : 'bbb'}">
                    </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[exercice.id] && (index < 1 || ($my.exercices[$current_theme.exercices[index-1].id] && $my.exercices[$current_theme.exercices[index-1].id].solved_rank)) ? '62c462' : 'bbb'}"
	                            width="5"
	                            height="30"
	                            x="10"
	                            y="0" />
	                        <path
	                            style="fill:#{$my && $my.exercices[exercice.id] ? ($my.exercices[exercice.id].solved_rank ? '62c462' : (exercice.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>
                        <div class="d-flex justify-content-between flex-wrap">
	                    <h5 class="fw-bold">
                                {#if $my && $my.exercices[exercice.id]}
	                            <span style="white-space: nowrap">
                                        {#if $my.exercices[exercice.id].wip}
	                                    <Icon name="cone-striped" aria-hidden="true" title="Cette étape est encore en construction." />
                                        {/if}
	                                {exercice.title}
                                    </span>
                                {:else}
	                            <span style="white-space: nowrap">
	                                <Icon name="lock-fill" aria-hidden="true" title="Vous n'avez pas encore accès à ce défi" />
	                                {exercice.title}
	                            </span>
                                {/if}
                                {#if exercice.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>
                            <div>
                                {#each exercice.tags as tag, idx}
	                            <Badge href="tags/{tag}" pill color="secondary" class="mx-1 float-end">#{tag}</Badge>
                                {/each}
                            </div>
                        </div>
	                <p>{@html exercice.headline}</p>
                    </div>
                    <div class="d-none d-md-block col-1 pe-0">
                        {#if $my && $my.exercices[exercice.id]}
	                    <a class="float-end" href="{$current_theme.urlid}/{exercice.urlid}" style="font-size: 3rem">
                                <Icon name="chevron-right" aria-hidden="true" />
                            </a>
                        {:else}
	                    <span class="float-end" style="font-size: 3rem">
                                <Icon name="chevron-right" aria-hidden="true" />
                            </span>
                        {/if}
                    </div>
                </div>
            </li>
        {/each}
    </ul>
    {:else}
    <p class="text-center my-5">
        Aucun contenu disponible actuellement.
    </p>
    {/if}
    </Col>
    </Row>

</Card>

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