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

 import FlagKey from './FlagKey.svelte';

 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">
            {#if typeof flag.choices[cid] != "object"}
                <input class="form-check-input" type="checkbox" id="mcq_{flag.id}_{cid}" bind:checked={values[Number(cid)]} disabled={flag.found || flag.part_solved}>
                <label class="form-check-label" for="mcq_{flag.id}_{cid}">
                    {flag.choices[cid]}{#if values[Number(cid)] && flag.justify}&nbsp;:{/if}
                </label>
                {#if values[Number(cid)] && flag.justify}
	            <FlagKey
                        class="mb-3"
                        {exercice_id}
                        flag={{id: cid, placeholder: "Flag correspondant"}}
                        no_label={true}
                        bind:value={justifications[cid]}
                    />
                {/if}
            {:else}
                <input class="form-check-input" type="checkbox" id="mcq_{flag.id}_{cid}" checked disabled>
	        <FlagKey
                    class={flag.choices[cid].justification.found?"":"mb-3"}
                    {exercice_id}
                    flag={flag.choices[cid].justification}
                    bind:value={justifications[cid]}
                />
            {/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>
