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

 export let exercice = {};
 export let flags = [];

 function submitFlags(event) {
     console.log(event);
 }

 let sberr = "";
 let message = "";
</script>

<Card class="border-danger mb-2">
    <CardHeader class="bg-danger">
        <Icon name="flag-fill" />
        Faire son rapport
    </CardHeader>
    {#if exercice.tries || exercice.submitted || sberr}
        <ListGroup>
            {#if exercice.solved_time && exercice.tries}
                <ListGroupItem class="text-warning">
                    {exercice.tries} {exercice.tries==1?"tentative effectuée":"tentatives effectuées"}.
                    Dernière solution envoyée à {exercice.solved_time}.
                </ListGroupItem>
            {/if}
            {#if exercice.solve_dist}
                <ListGroupItem>
                    {exercice.solve_dist} {exercice.solve_dist == 1?"réponse erronée":"réponses erronées"}.
                </ListGroupItem>
            {/if}
            {#if exercice.submitted || sberr}
	        <ListGroupItem>
                    {#if !sberr}
                        <strong>Votre solution a bien été envoyée !</strong>
                    {:else}
                        <strong>{sberr}</strong> {message}
                    {/if}
                </ListGroupItem>
            {/if}
            {#if exercice.timeouted}
	        <ListGroupItem class="text-danger">
                    <strong>Oops</strong>
                    La requête a dépassé le délai d'attente. Vous devriez réessayer dans quelques instant&hellip;
                </ListGroupItem>
            {/if}
        </ListGroup>
    {/if}
    {#if !exercice.submitted || sberr}
        <CardBody>
	    <form on:submit|preventDefault={submitFlags}>
                {JSON.stringify(flags)}
		<div class="form-group mt-2">
		    <Button
                        type="submit"
                        color="danger"
                    >
                        Soumettre
                    </Button>
		</div>
            </form>
        </CardBody>
    {/if}
</Card>
