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

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

 export let hints = [];

 let hinterror = "";
</script>

{#if hints.length}
    <Card class="mb-2">
	<CardHeader class="bg-info">
            <Icon name="lightbulb-fill" />
            Indices
        </CardHeader>
        {#if hinterror}
            <CardBody>
                <CardText class="text-danger">
                    {hinterror}
                </CardText>
            </CardBody>
        {/if}
        <ListGroup>
            {#each hints as hint (hint.id)}
                <ListGroupItem tag="a" href="{hint.file}" target="_self" class="d-flex">
                    {#if hint.file}
		        <h1><Icon name="arrow-down-circle" /></h1>
                    {/if}
                    <div>
                        {#if !(hint.content || hint.file)}
		            <button type="button" ng-click="hsubmit(hint)" class="float-end btn btn-info" class:disabled={hint.submitted}>
                                <Icon name="lock" aria-hidden="true" />
                                Débloquer
                            </button>
                        {/if}
                        {#if !hint.file && hint.hidden}
		            <button type="button" ng-click="hint.hidden = false;" class="float-end btn btn-info">
                                <Icon name="lock" aria-hidden="true" />
                                Afficher
                            </button>
                        {/if}
		        <h4 class="fw-bold">{hint.name}</h4>
                        {#if hint.file}
		            <p>
                                Cliquez ici pour télécharger l'indice.<br>
                                b2sum&nbsp;:
                                <samp class="cksum" title="Somme de contrôle BLAKE2b : {hint.content}">{hint.content}</samp>
                            </p>
                        {:else if hint.content && !hint.hidden}
		            <p>{@html hint.content}</p>
                        {:else}
		            <p>
                                Débloquer cet indice vous fera perdre {hint.cost * settings.hintCurrentCoefficient} {hint.cost * settings.hintCurrentCoefficient==1?"point":"points"}.
                            </p>
                        {/if}
                    </div>
                </ListGroupItem>
            {/each}
        </ListGroup>
    </Card>
{/if}
