funky-framadate-front/src/app/features/administration/form/steps/step-one/step-one.component.html

<app-stepper [step_current]="1" [step_max]="pollService.step_max"></app-stepper>
<div class="step step-container">
	<form class="min-height" [formGroup]="pollService.form">
		<section class="poll-title">
			<h1 class="title is-1" id="step_title">
				{{ 'creation.choose_title' | translate }}
			</h1>
			<div class="columns">
				<div class="column">
					<div>
						<label for="title">{{ 'creation.choose_title_label' | translate }}</label>
					</div>
					<input
						class="input is-fullwidth"
						#title
						formControlName="title"
						(keyup)="pollService.updateSlug()"
						(blur)="pollService.updateSlug()"
						id="title"
						maxlength="140"
						required
					/>
				</div>
			</div>
		</section>
		<div class="poll-description">
			<div class="columns">
				<div class="column">
					<label for="descr">
						{{ 'creation.description' | translate }}
					</label>
					<div class="rich-toolbar" *ngIf="pollService.form.value.richTextMode">
						richTextMode activé
					</div>
					<textarea
						class="ui-inputtextarea is-fullwidth is-block"
						#description
						matInput
						id="descr"
						class="is-large is-full input"
						formControlName="description"
						required
						[maxlength]="environment.description_max_chars"
					></textarea>
					<div
						class="text-info"
						[ngClass]="{
							'has-background-warning':
								pollService.form.value.description.length === environment.description_max_chars
						}"
					>
						<p>
							<span class="counter-current" *ngIf="pollService.form.value.description.length">
								{{ pollService.form.value.description.length }} /
							</span>
							{{ environment.description_max_chars }}
							{{ 'creation.description_constraint' | translate }}
						</p>
					</div>
				</div>
			</div>
		</div>
	</form>
	<p-confirmDialog #cd [style]="{ width: '486px' }">
		<ng-template pTemplate="header">
			<h3>{{ 'creation.dialog' | translate }}</h3>
		</ng-template>
		<ng-template pTemplate="footer">
			<button
				type="button"
				icon="pi pi-times"
				[value]="'dialogs.no' | translate"
				(click)="cd.close($event)"
			></button>
			<button
				type="button"
				icon="pi pi-check"
				[value]="'dialogs.yes' | translate"
				(click)="leave($event)"
			></button>
		</ng-template>
	</p-confirmDialog>
</div>
<app-nav-steps
	[display_previous_button]="false"
	[display_next_button]="true"
	[next_step_number]="pollService.step_current + 1"
	[previous_step_number]="pollService.step_current - 1"
></app-nav-steps>