<script>
 import { createEventDispatcher } from 'svelte';

 import { user } from '../stores/user';

 const dispatch = createEventDispatcher();

 let className = '';
 export { className as class };
 export let question = null;
 export let qid = null;
 export let edit = false;
</script>

<div class="card-header {className}">
    <slot></slot>

    {#if edit}
        <div class="card-title row">
            <label for="q{qid}title" class="col-auto col-form-label font-weight-bold">Titre&nbsp;:</label>
            <div class="col"><input id="q{qid}title" class="form-control" bind:value={question.title}></div>
        </div>
    {:else}
        <h4 class="card-title mb-0">{#if qid !== null}{qid + 1}. {/if}{question.title}</h4>
    {/if}

    {#if edit}
        <div class="form-group row">
	    <label class="col-2 col-form-label" for="q{qid}kind">Type de réponse</label>
	    <div class="col">
	        <select class="form-select" id="q{qid}kind" bind:value={question.kind}>
	            <option value="text">Texte</option>
	            <option value="list">Liste de champs de texte</option>
	            <option value="list5">Liste de champs de texte (5 champs)</option>
	            <option value="int">Entier</option>
	            <option value="ucq">QCU</option>
	            <option value="mcq">QCM</option>
	        </select>
	    </div>
        </div>

        <textarea class="form-control mb-2" bind:value={question.desc_raw} placeholder="Description de la question"></textarea>
    {:else if question.description}
        <p class="card-text mt-2">{@html question.description}</p>
    {/if}
</div>
