funky-framadate-front/src/app/features/administration/form/option-link/option-link.component.html

<div class="options">
	<h1 class="title is-1">
		{{ 'choices.title' | translate }}
	</h1>

	<!--{{ 'choices.helper' |translate}}-->
	<div class="rounded-block has-nopadbottom" *ngFor="let choice of StorageService.choicesText; index as ii">
		<label [for]="'option_' + ii">{{ 'choices.element' | translate }} {{ ii + 1 }}</label>
		<input type="text" [(ngModel)]="choice.name" class="input" />

		<div class="pull-left" *ngIf="choice.url_display">
			<img src="{{ choice.url_display }}" alt="image" class="image-preview is-rounded" />
		</div>
		<div class="href-preview" *ngIf="choice.url_href">
			<a href="{{ choice.url_href }}">{{ choice.url_href }}</a>
		</div>
		<div class="link-land">
			<button
				(click)="openLinkModal(choice)"
				class="has-no-border has-background-icon-left is-filtered-icon-primary is-fullwidth"
				[ngClass]="{
					'has-background-edit': url_href || url_display,
					'has-background-link-icon': !url_href && !url_display
				}"
			>
				{{ evalChoiceUrl(choice) | translate }}
			</button>
		</div>

		<hr />
		<div class="down-line-button-container">
			<button
				[attr.aria-label]="'choices.delete' | translate"
				class="has-background-trash has-background-icon-left is-filtered-icon-primary"
				(click)="StorageService.choicesText.splice(ii, 1)"
			>
				{{ 'choices.delete' | translate }}
			</button>
		</div>
	</div>
</div>

<button class="is-primary button is-fullwidth is-thin" (click)="addLink()">
	{{ 'choices.add' | translate }}
</button>

<!--	dialog search-->
<p-dialog
	[modal]="true"
	[(visible)]="display_option_dialog"
	[breakpoints]="{ '600px': '75vw', '400px': '95vw' }"
	[style]="{ width: '486px' }"
	[draggable]="false"
	[showHeader]="false"
	[resizable]="true"
>
	<ng-template pTemplate="titlebar">
		<button
			id="close_dialog"
			class="button cancel-button-reject pull-right has-text-right has-no-border is-closing-popup"
			(click)="closeModalAndFocusOnOpenModalButton()"
		>
			{{ 'SENTENCES.Close' | translate }} <img class="icon fa" src="assets/icons/x_blue.svg" />
		</button>

		<h1 class="title is-1">
			{{ 'choices.modal.title' | translate }}
		</h1>
		<p class="description">
			{{ 'choices.modal.description' | translate }}
		</p>
		<label for="modal_url">
			{{ 'choices.modal.url_label' | translate }}
		</label>
		<input type="text" [(ngModel)]="url_href" id="modal_url" />
		<label for="modal_url">
			{{ 'choices.modal.img_label' | translate }}
		</label>
		<input type="text" [(ngModel)]="url_display" id="modal_img_url" />
	</ng-template>
	<ng-template pTemplate="footer">
		<div class="bottom has-text-right">
			<button class="button is-secondary marged-right" (click)="closeModal()">
				{{ 'SENTENCES.Cancel' | translate }}
			</button>
			<button class="button is-primary" (click)="validateModal()">
				{{ 'choices.modal.validate' | translate }}
			</button>
		</div>
	</ng-template>
</p-dialog>

<!--<app-wip-todo></app-wip-todo>-->