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>