@if (groups().length > 1) {
	<app-chip-bar
		[items]="chipItems()"
		anchorPrefix="group-"
		[navLabel]="'CATEGORIES' | translate"
		[revealIndex]="topGroupIndex()"
		(itemSelected)="onChipSelected($event)"
		(wheelPastEnd)="onChipWheelPastEnd($event)"
	/>
}
<div #scrollHost class="groups" (scroll)="onGroupsScroll()">
	@for (group of groups(); track group.name; let i = $index) {
		<div class="group" id="group-{{i}}">
			@if (groups().length > 1) {
				<button
					type="button"
					class="group-name"
					id="group-name-{{i}}"
					[attr.tabindex]="groupTabIndex(i)"
					[attr.aria-expanded]="group.expanded()"
					(keydown)="onGalleryKeydown($event)"
					(click)="toggleGroupExpanded($event, group)"
				>
					<span class="group-expander" [class.expanded]="group.expanded()"></span>
					{{ group.isRandom ? ('RANDOM_GROUP' | translate) : (group.name | translateGroup:translate.currentLang()) }}
					<span class="group-count"></span>
				</button>
			}
			@if (group.expanded()) {
				@if (group.isRandom) {
					<div class="previews previews-random" appDeferLoadScrollHost>
						@for (item of group.layouts; track item.layout.id; let index = $index) {
							<div
								app-layout-list-item
								class="preview preview-seed-card"
								[item]="item"
								[label]="('RANDOM_LAYOUT' | translate) + ' ' + (index + 1)"
								[random]="true"
								[tabbable]="item.layout.id === tabbableId()"
								(keyEvent)="onGalleryKeydown($event)"
								(startEvent)="onStart(item)"
								(seedEvent)="regenerateWithSeed($any(item), $event)"
							></div>
						}
						<div class="preview-random">
							<div class="random-options">
								<label for="random-setting-vertical">
									<app-icon-mirror-vertical/>
									{{ 'MIRROR_X' | translate }}
								</label>
								<select id="random-setting-vertical" (change)="this.randomMirrorXSet($any($event.target).value)">
									<option value="random" [selected]="this.randomMirrorX() ==='random'">{{ 'RANDOM_MIRROR' | translate }}</option>
									<option value="true" [selected]="this.randomMirrorX() ==='true'">{{ 'YES' | translate }}</option>
									<option value="false" [selected]="this.randomMirrorX() ==='false'">{{ 'NO' | translate }}</option>
								</select>
							</div>
							<div class="random-options">
								<label for="random-setting-horizontal">
									<app-icon-mirror-horizontal/>
									{{ 'MIRROR_Y' | translate }}
								</label>
								<select id="random-setting-horizontal" (change)="this.randomMirrorYSet($any($event.target).value)">
									<option value="random" [selected]="this.randomMirrorY() ==='random'">{{ 'RANDOM_MIRROR' | translate }}</option>
									<option value="true" [selected]="this.randomMirrorY() ==='true'">{{ 'YES' | translate }}</option>
									<option value="false" [selected]="this.randomMirrorY() ==='false'">{{ 'NO' | translate }}</option>
								</select>
							</div>
							<div>
								<button type="button" (click)="generateRandomLayouts()">
									{{ 'GENERATE' | translate }}
								</button>
							</div>
						</div>
					</div>
				} @else {
					<div class="previews" appDeferLoadScrollHost>
						@for (item of group.layouts; track item.layout.id) {
							<div
								app-layout-list-item
								class="preview"
								[item]="item"
								[tabbable]="item.layout.id === tabbableId()"
								(keyEvent)="onGalleryKeydown($event)"
								(startEvent)="onStart(item)"
								(clearBestTimeEvent)="clearBestTime(item)"
								(customDeleteEvent)="removeCustom(item)"
							></div>
						}
					</div>
				}
			}
		</div>
	}
</div>