@if (!showForm()) {
	<section class="page-section">
		<header class="page-heading">
			<div>
				<p class="eyebrow">Dossiers</p>
				<h1>Mes locataires</h1>
				<p>Contacts, pièces jointes et accès rapide aux baux associés.</p>
			</div>
			@if (vaultBusy()) {
				<p class="vault-status" role="status">Déverrouillage du coffre…</p>
			}
			<button mat-flat-button type="button" class="primary-action" (click)="openAddForm()">
				<span aria-hidden="true">+</span> Ajouter un locataire
			</button>
		</header>
		<div class="content-region" [attr.aria-busy]="workspace.tenantLoadState().loading">
			@if (!workspace.tenantLoadState().loaded && workspace.tenantLoadState().loading) {
				<div class="tenant-grid" aria-label="Chargement des locataires">
					@for (placeholder of [1, 2, 3]; track placeholder) {
						<article class="skeleton-card" aria-hidden="true">
							<span class="skeleton-line skeleton-line-short"></span>
							<span class="skeleton-line skeleton-line-title"></span>
							<span class="skeleton-line"></span>
							<span class="skeleton-line skeleton-line-medium"></span>
						</article>
					}
				</div>
			} @else if (!workspace.tenantLoadState().loaded && workspace.tenantLoadState().error) {
				<article class="load-error" role="alert">
					<h2>Chargement impossible</h2>
					<p>{{ workspace.tenantLoadState().error }}</p>
					<button mat-stroked-button type="button" (click)="workspace.loadTenants()">
						Réessayer
					</button>
				</article>
			} @else {
				@if (workspace.tenantLoadState().loading) {
					<mat-progress-bar
						mode="indeterminate"
						aria-label="Actualisation des locataires"
					/>
				}
				@if (workspace.tenantLoadState().error) {
					<div class="refresh-error" role="alert">
						<p>{{ workspace.tenantLoadState().error }}</p>
						<button mat-button type="button" (click)="workspace.loadTenants()">
							Réessayer
						</button>
					</div>
				}
				@if (vaultError()) {
					<div class="refresh-error" role="alert">{{ vaultError() }}</div>
				}
				@if (workspace.tenants().length === 0) {
					<article class="empty-state">
						<p class="eyebrow">Premier dossier</p>
						<h2>Aucun locataire enregistré</h2>
						<p>
							Centralisez ici les coordonnées et pièces jointes utiles de vos
							locataires.
						</p>
						<button mat-stroked-button type="button" (click)="openAddForm()">
							Ajouter un locataire
						</button>
					</article>
				} @else {
					<div class="tenant-grid">
						@for (tenant of workspace.tenants(); track tenant.id) {
							<app-tenant-card
								[attr.id]="tenant.id ? 'tenant-' + tenant.id : null"
								[tenant]="tenant"
								[deleting]="
									!!tenant.id && workspace.deletingTenantIds().has(tenant.id)
								"
								[deleteError]="
									tenant.id
										? (workspace.tenantDeleteErrors()[tenant.id] ?? '')
										: ''
								"
								(editRequested)="openEditForm($event)"
								(unlockRequested)="unlockVault()"
								(deleteRequested)="workspace.deleteTenant($event)"
								(tenantVersionChanged)="
									workspace.acceptTenantAccountClosure(tenant.id!, $event)
								"
							/>
						}
					</div>
				}
			}
		</div>
	</section>
} @else {
	@if (vaultBusy()) {
		<p class="vault-status" role="status">Déverrouillage du coffre…</p>
	}
	@if (vaultError()) {
		<div class="refresh-error" role="alert">{{ vaultError() }}</div>
	}
	<app-tenant-form
		[tenant]="editingTenant()"
		[saving]="workspace.tenantSaving(editingTenant()?.id) || vaultBusy()"
		[saveError]="workspace.tenantSaveError(editingTenant()?.id)"
		[saveFieldErrors]="workspace.tenantSaveFieldErrors(editingTenant()?.id)"
		[leases]="workspace.leases()"
		[leaseLoadState]="workspace.leaseLoadState()"
		(cancelled)="closeForm()"
		(submitted)="saveTenant($event)"
		(fieldChanged)="workspace.clearTenantSaveFieldError($event, editingTenant()?.id)"
		(leaseRetryRequested)="workspace.loadLeases()"
		(attachmentAdded)="acceptAttachment($event)"
		(attachmentRemoved)="acceptAttachmentRemoval($event)"
	/>
}