framadate-responsive/src/app/pages/answers/answers.component.html

<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>