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

 import { issues, issues_idx } from '../stores/issues.js';

 export let exercice = null;
 export let issue = { };
</script>

<form on:submit|preventDefault>
    {#if exercice || issue.id_exercice}
        <div class="row mb-3">
	    <label for="idExercice" class="col-sm-2 col-form-label">Défi</label>
	    <div class="col-sm-10">
                {#if exercice.id}
	            <input type="text" readonly class="form-control-plaintext" id="idExercice" value={exercice.title}>
                {:else}
                    <input type="text" readonly class="form-control-plaintext" id="idExercice" value="{issue.id_exercice}">
                {/if}
	    </div>
        </div>
    {/if}
    <div class="row mb-3">
	<label for="subject" class="col col-form-label">Objet</label>
	<div class="col-sm-10">
            {#if issue.id && $issues_idx[issue.id]}
	        <input type="text" readonly class="form-control-plaintext" id="subject" value="Re: {$issues_idx[issue.id].subject}">
            {:else}
                <input type="text" class="form-control" id="subject" bind:value={issue.subject} placeholder="Intitulé succinct">
            {/if}
	</div>
    </div>

    <div class="row mb-3">
	<label for="description" class="col col-form-label">Description</label>
	<div class="col-sm-10">
	    <textarea class="form-control" id="description" bind:value={issue.description} placeholder="Décrivez en détail votre problème ici. Si nécessaire, incluez un lien vers une capture d'écran montrant votre problème."></textarea>
	</div>
    </div>

    <Button type="submit" color="warning" class="float-end">
        Envoyer le rapport
    </Button>
</form>
