@if (item().visible()) {
	@if (random()) {
		<app-layout-preview [svg]="previewSVG()" [alt]="name()"></app-layout-preview>
	} @else {
		<app-layout-preview [layout]="item().layout" [alt]="name()"></app-layout-preview>
	}
} @else {
	<div class="preview-placeholder" [class.selected]="item().selected()"></div>
}
@if (random()) {
	<div class="preview-seed" tabindex="-1" (click)="$event.stopPropagation()" (keydown)="$event.stopPropagation()">
		<input
			type="text" class="seed-input" tabindex="-1"
			[value]="seed()"
			(keyup)="onSeedKeyUp($event)"
			[attr.aria-label]="'LAYOUT_SEED_LABEL' | translate"
			[attr.title]="'LAYOUT_SEED_LABEL' | translate"
		/>
	</div>
} @else {
	@if (item().bestTime; as bestTime) {
		<div class="preview-best-time">
			<span title="{{ 'STATS_BEST' | translate }}">{{ bestTime | duration }}</span>
			<button type="button" tabindex="-1" (click)="onClearBestTime($event)" [attr.aria-label]="'BEST_TIME_CLEAR' | translate">
				<app-icon-delete/>
			</button>
		</div>
	}
	<div class="preview-name">{{ name() }}</div>
	@if (item().layout.custom) {
		<button type="button"
			tabindex="-1"
			class="preview-custom-delete"
			(click)="onRemoveCustom($event)"
			title="{{ 'CUSTOM_LAYOUT_DELETE' | translate }}"
			[attr.aria-label]="'CUSTOM_LAYOUT_DELETE' | translate"
		>
			<app-icon-delete/>
		</button>
	}
}