<script>
 import {
     Card,
     CardBody,
     CardHeader,
     CardText,
     Icon,
     ListGroup,
     ListGroupItem,
 } from '@sveltestrap/sveltestrap';

 import DateFormat from './DateFormat.svelte';

 export let theme = {};
 export let exercice = {};

 let next = null;
 $: {
     for (const ex of theme.exercices) {
         if (ex.id == exercice.id && ex.next) {
             next = ex.next;
         }
     }
 }
</script>

<Card class="border-success mb-2">
    <CardHeader class="bg-success text-light">
        <Icon name="flag-fill" />
        Défi réussi&nbsp;!
    </CardHeader>
    <CardBody>
	<CardText>
            {#if exercice.solved_rank}
                Vous êtes la {exercice.solved_rank}<sup>{exercice.solved_rank==1?"re":"e"}</sup> équipe à avoir résolu ce défi à <DateFormat date={exercice.solved_time} />.
            {:else}
                Bravo, vous avez résolu ce défi à <DateFormat date={exercice.solved_time} />{exercice.solved_time}.
            {/if}
            Vous avez marqué {exercice.gain} {exercice.gain==1?"point":"points"}&nbsp;!
        </CardText>
        {#if exercice.finished}
	    <hr>
	    <CardText>{@html exercice.finished}</CardText>
            {#if exercice.next}
	        <hr>
            {/if}
        {/if}
        {#if next}
	    <a href="{theme.urlid}/{theme.exercices[next].urlid}" class="btn btn-success">Passer au défi suivant</a>
        {/if}
    </CardBody>
</Card>
