<div class="answers" >
    <h1 i18n >
        Choisir les propositions
    </h1 >

    <p
        class="subtitle"
        i18n >
        Vous pouvez utiliser la syntaxe markdown, et naviguer entre les inputs avec les flèches du clavier.
    </p >

    <ol >
        <li
            #answers
            *ngFor="let answer of config.answers; index as i;trackBy trackFunction"
            class="answer-item" >
            <button
                class='btn btn--default'
                title='ajouter une image'
                (click)='showModalForPictureOfAnswer(answer)' >
                <i class='fa fa-image' ></i >
            </button >
            <label
                for='answer_{{answer.id}}_url'
                (click)='showModalForPictureOfAnswer(answer)' >

                <img
                    class='img-thumbnail'
                    src='{{answer.url}}'
                    alt='image {{answer.url}}' >
            </label >
            <p-dialog
                class='url-dialog'
                [(visible)]="display"
                [modal]='true' >
                <p-header >
                    {{answer.text}}
                </p-header >

                <form
                    action='#'
                    (submit)='display=false' >
                    <label for='answer_{{answer.id}}_url' >
                        Choisissez une URL pour illustrer le choix de réponse
                    </label >
                    <i class='fa fa-image' ></i >
                    <br >
                    <input
                        class='input is-block'
                        id='answer_{{answer.id}}_url'
                        type='text'
                        autofocus='autofocus'
                        name='answer-url'
                        [(ngModel)]='answer.url' >

                </form >

            </p-dialog >
            <input
                type="name"
                class="answer"
                id='answer_{{answer.id}}'
                [(ngModel)]="answer.text"
                (keyup.enter)="addAnswer()"
                (keyup)="navigateOrDelete($event,i)"
                required='required'
                placeholder="réponse"
            >
            <button
                class="btn btn--alert"
                (click)="config.answers.splice(i,1)" >X
            </button >
        </li >
    </ol >

    <button
        class="btn btn--primary btn--outline"
        (click)="addAnswer()"
        [ngClass]="{'btn--primary': allAnswersAreValid}"
        i18n
    >
        <i class='fa fa-plus' ></i >
        Ajouter une proposition
    </button >
    <br >
    <button
        [routerLink]="'/step/resume'"
        class="btn btn--full "
        i18n
        [ngClass]="{'btn--primary': allAnswersAreValid}"
        [disabled]='!allAnswersAreValid'
    >
        Voyons ce que ça donne
    </button >
    <br >
    <a
        [routerLink]="'/home'"
        class="prev"
        i18n >
        Retour
    </a >
</div >

./answers.component.scss