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

 import FlagKey from './FlagKey.svelte';

 export let refresh_my = null;
 export let exercice_id = 0;
 export let flag = { };
 export let values = { };
 export let justifications = { };
</script>

{#if flag.label}
    <p class="mb-1">
        {flag.label}&nbsp;:
        {#if flag.found}
            <Icon name="check" class="form-control-feedback text-success" aria-hidden="true" title="QCM réussi à {flag.solved}" />
        {/if}
    </p>
{/if}
{#if !flag.found || flag.justify}
    {#each Object.keys(flag.choices) as cid, index}
        <div class="form-check ms-3">
            <input class="form-check-input" type="checkbox" id="mcq_{flag.id}_{cid}" bind:checked={values[Number(cid)]} disabled={flag.found}>
            <label class="form-check-label" for="mcq_{flag.id}_{cid}">
                {#if typeof flag.choices[cid] == "Object"}
                    {flag.choices[cid].label}
                {:else}
                    {flag.choices[cid]}
                {/if}
            </label>
            {#if values[Number(cid)] && flag.justify && (!flag.choices[cid].justification || !flag.choices[cid].justification.solved)}
	        <FlagKey
                    {exercice_id}
                    flag={flag.choices[cid].justification}
                    {refresh_my}
                    bind:values={justifications[flag.choices[cid].justification.id]}
                />
            {/if}
            {#if flag.choices[cid].justification && flag.choices[cid].justification.solved}
                <Icon name="check" class="form-control-feedback text-success" aria-hidden="true" title="Flag trouvé !" />
            {/if}
        </div>
    {/each}
{/if}
<hr>
