@if (guarantee(); as visale) {
	<div class="visale-editor">
		<div class="fields">
			<mat-form-field appearance="outline">
				<mat-label>Numéro de visa Visale</mat-label>
				<input
					matInput
					required
					[value]="visale.visaNumber"
					[disabled]="disabled() || busy() || !!visa()"
					(input)="updateVisaNumber($event)"
				/>
			</mat-form-field>
			<mat-form-field appearance="outline">
				<mat-label>Locataires couverts</mat-label>
				<mat-select
					required
					[value]="visale.tenantIds"
					[disabled]="disabled() || busy() || !!visa()"
					multiple
					(selectionChange)="updateTenants($event.value)"
				>
					@for (tenant of tenants(); track tenant.id) {
						<mat-option [value]="tenant.id">{{
							tenantDisplayLabel(tenant)
						}}</mat-option>
					}
				</mat-select>
			</mat-form-field>
		</div>
		<button
			mat-button
			type="button"
			[disabled]="disabled() || busy() || !!visa()"
			(click)="removeDeclaration()"
		>
			Supprimer la garantie Visale
		</button>
		@if (visa()) {
			<p>Supprimez d’abord la copie du visa Visale pour modifier sa déclaration.</p>
		}
		@if (declarationError()) {
			<p class="field-error" role="alert">{{ declarationError() }}</p>
		}
		@if (declarationPersisted()) {
			@if (contractState() === 'LOADING') {
				<p class="status" role="status">Vérification du contrat Visale…</p>
			} @else if (contractState() === 'ERROR') {
				<p class="field-error" role="alert">
					L’état du contrat Visale n’a pas pu être vérifié.
				</p>
			} @else if (contractState() === 'STALE') {
				<p class="field-error" role="alert">
					Le contrat Visale est obsolète : téléversez celui correspondant à la
					déclaration.
				</p>
			} @else if (contractState() === 'ABSENT') {
				<p>Le contrat Visale requis n’a pas encore été téléversé.</p>
			}
			<div class="actions">
				<input
					#contractInput
					hidden
					type="file"
					accept="application/pdf"
					[disabled]="disabled() || busy()"
					(change)="selectContract($event)"
				/>
				<button
					mat-stroked-button
					type="button"
					[disabled]="disabled() || busy()"
					(click)="contractInput.click()"
				>
					{{
						contractState() === 'PRESENT'
							? 'Remplacer le contrat Visale'
							: 'Téléverser le contrat Visale'
					}}
				</button>
				@if (contractState() === 'PRESENT') {
					<button
						mat-button
						type="button"
						[disabled]="busy()"
						(click)="downloadContract()"
					>
						Télécharger le contrat
					</button>
					<button mat-button type="button" [disabled]="busy()" (click)="deleteContract()">
						Retirer le contrat
					</button>
				}
			</div>
			<p>
				Le contrat est requis avant de générer le dossier. Une modification du numéro de
				visa ou des locataires couverts impose de le téléverser à nouveau.
			</p>
			<div class="actions">
				@if (visa(); as currentVisa) {
					<span>Copie du visa Visale : {{ currentVisa.fileName }}</span>
					<button mat-button type="button" [disabled]="busy()" (click)="downloadVisa()">
						Télécharger
					</button>
					<button mat-button type="button" [disabled]="busy()" (click)="deleteVisa()">
						Supprimer le PDF
					</button>
				} @else {
					<input
						#visaInput
						hidden
						type="file"
						accept="application/pdf"
						[disabled]="disabled() || busy()"
						(change)="selectVisa($event)"
					/>
					<button
						mat-stroked-button
						type="button"
						[disabled]="disabled() || busy()"
						(click)="visaInput.click()"
					>
						Téléverser une copie du visa Visale
					</button>
				}
			</div>
		} @else {
			<p>
				Enregistrez la déclaration Visale sans modification avant de téléverser une copie du
				visa Visale.
			</p>
		}
		<p>La copie est conservée sans certification de son contenu ni de sa validité juridique.</p>
		<p>Le contrat est conservé séparément, sans analyse ni certification de son contenu.</p>
		@if (busy()) {
			<p class="status" role="status" aria-live="polite">
				<mat-spinner diameter="18" aria-hidden="true" />
				{{ status() }}
			</p>
		}
		@if (error()) {
			<p class="field-error" role="alert">{{ error() }}</p>
		}
	</div>
} @else {
	<button
		mat-stroked-button
		type="button"
		[disabled]="disabled() || !tenants().length"
		(click)="declare()"
	>
		Déclarer une garantie Visale
	</button>
}