@if (this.layout()) {
	<div class="editor-matrix-list">
		<ul class="matrix-list" role="listbox">
			@for (z of this.matrix.levels; track i; let i = $index) {
				<li [ngClass]="{selected:i===this.currentZ()}"
					(click)="this.selectLevel(i)"
					tabindex="0"
					role="option"
					[attr.aria-selected]="i === this.currentZ()"
					[attr.aria-label]="('EDITOR_LAYER' | translate) + ' ' + i"
					(keydown.enter)="this.selectLevel(i)"
					(keydown.space)="$event.preventDefault(); this.selectLevel(i)"
				>
					<div class="level-title">{{ 'EDITOR_LAYER' | translate }} {{ i }}</div>
					<div class="matrix-level">
						<app-layout-matrix [level]="{z:i,rows:z,showStones:true}" [matrix]="this.matrix" (clickMatrixEvent)="this.selectLevel(i)"></app-layout-matrix>
					</div>
				</li>
			}
		</ul>
	</div>
	<div class="editor-selected">
		<div class="matrix-edit">
			<div class="matrix-edit-top">
				<div class="buttonbar">
					<div class="buttons buttons-current-level">
						<div class="buttonbar-title">{{ 'EDITOR_LAYER' | translate }} {{ this.currentZ() }}</div>
						<div class="button-group">
							<button type="button" class="icon-button" (click)="this.newLayerBelow(this.currentZ())" title="{{'EDITOR_NEW_LAYER_BELOW_LONG' | translate}}" [attr.aria-label]="'EDITOR_NEW_LAYER_BELOW_LONG' | translate">
								<app-icon-layer-add-below />
							</button>
							<button type="button" class="icon-button" (click)="this.newLayerAbove(this.currentZ())" title="{{'EDITOR_NEW_LAYER_ABOVE_LONG' | translate}}" [attr.aria-label]="'EDITOR_NEW_LAYER_ABOVE_LONG' | translate">
								<app-icon-layer-add-above />
							</button>
							<button type="button" class="icon-button" (click)="this.duplicateLayerZ(this.currentZ())" title="{{'EDITOR_DUPLICATE_LAYER_LONG' | translate}}" [attr.aria-label]="'EDITOR_DUPLICATE_LAYER_LONG' | translate">
								<app-icon-duplicate />
							</button>
							<button type="button" class="icon-button" (click)="this.clearLayerZ(this.currentZ())" title="{{'EDITOR_CLEAR_LAYER_LONG' | translate}}" [attr.aria-label]="'EDITOR_CLEAR_LAYER_LONG' | translate">
								<app-icon-clear />
							</button>
							<button type="button" class="icon-button icon-button-danger" (click)="this.deleteLayerZ(this.currentZ())" title="{{'EDITOR_DELETE_LAYER_LONG' | translate}}" [attr.aria-label]="'EDITOR_DELETE_LAYER_LONG' | translate">
								<app-icon-delete />
							</button>
							<button type="button" class="icon-button" [disabled]="this.currentZ()===0" (click)="this.moveLayerZ(-1, this.currentZ())" title="{{'EDITOR_MOVE_LAYER_DOWN_LONG' | translate}}" [attr.aria-label]="'EDITOR_MOVE_LAYER_DOWN_LONG' | translate">
								<app-icon-up />
							</button>
							<button type="button" class="icon-button" [disabled]="this.currentZ()===this.matrix.levels.length-1" (click)="this.moveLayerZ(1, this.currentZ())" title="{{'EDITOR_MOVE_LAYER_UP_LONG' | translate}}" [attr.aria-label]="'EDITOR_MOVE_LAYER_UP_LONG' | translate">
								<app-icon-down />
							</button>
						</div>
					</div>
					<div class="buttons">
						<span class="buttonbar-title">{{ 'TILES' | translate }}: {{ this.stats()?.layerCount }}</span>
						<div class="button-group">
							<button type="button" class="icon-button" (click)="this.moveLayerY(-1)" title="{{'EDITOR_MOVE_TILES_UP_LONG' | translate}}" [attr.aria-label]="'EDITOR_MOVE_TILES_UP_LONG' | translate">
								<app-icon-up />
							</button>
							<button type="button" class="icon-button" (click)="this.moveLayerY(1)" title="{{'EDITOR_MOVE_TILES_DOWN_LONG' | translate}}" [attr.aria-label]="'EDITOR_MOVE_TILES_DOWN_LONG' | translate">
								<app-icon-down />
							</button>
							<button type="button" class="icon-button" (click)="this.moveLayerX(-1)" title="{{'EDITOR_MOVE_TILES_LEFT_LONG' | translate}}" [attr.aria-label]="'EDITOR_MOVE_TILES_LEFT_LONG' | translate">
								<app-icon-left />
							</button>
							<button type="button" class="icon-button" (click)="this.moveLayerX(1)" title="{{'EDITOR_MOVE_TILES_RIGHT_LONG' | translate}}" [attr.aria-label]="'EDITOR_MOVE_TILES_RIGHT_LONG' | translate">
								<app-icon-right />
							</button>
						</div>
						<div class="button-group">
							<button type="button" class="icon-button" [class.checked]="this.mirrorX()" [attr.aria-pressed]="this.mirrorX()" (click)="this.toggleMirrorX()" title="{{'MIRROR_X' | translate}}" [attr.aria-label]="'MIRROR_X' | translate">
								<app-icon-mirror-vertical />
							</button>
							<button type="button" class="icon-button" [class.checked]="this.mirrorY()" [attr.aria-pressed]="this.mirrorY()" (click)="this.toggleMirrorY()" title="{{'MIRROR_Y' | translate}}" [attr.aria-label]="'MIRROR_Y' | translate">
								<app-icon-mirror-horizontal />
							</button>
						</div>
					</div>
				</div>
				<div class="matrix-canvas">
					<app-layout-matrix [level]="this.level()" (clickDrawEvent)="this.onCellClick($event)" (clickStoneEvent)="this.onStoneClick($event)" [isEditable]="true" [matrix]="this.matrix"></app-layout-matrix>
				</div>
			</div>
			<div class="matrix-edit-bottom">
				<div class="buttonbar">
					<div class="buttons">
						<div class="buttonbar-title">{{ 'EDITOR_VIEW_FULL' | translate }}</div>
					</div>
					<div class="buttons">
						<span
							class="buttonbar-title"
							[class.count-invalid]="this.stats()?.countInvalid"
							[attr.title]="this.stats()?.countInvalid ? ('EDITOR_TILE_COUNT_INVALID' | translate:tileCountLimits) : null"
						>{{ 'TILES' | translate }}: {{ this.stats()?.totalCount }}</span>
						<div class="button-group">
							<button type="button" class="icon-button" (click)="this.moveY(-1)" title="{{ 'EDITOR_MOVE_ALL_TILES_UP_LONG' | translate }}" [attr.aria-label]="'EDITOR_MOVE_ALL_TILES_UP_LONG' | translate">
								<app-icon-up />
							</button>
							<button type="button" class="icon-button" (click)="this.moveY(1)" title="{{ 'EDITOR_MOVE_ALL_TILES_DOWN_LONG' | translate }}" [attr.aria-label]="'EDITOR_MOVE_ALL_TILES_DOWN_LONG' | translate">
								<app-icon-down />
							</button>
							<button type="button" class="icon-button" (click)="this.moveX(-1)" title="{{ 'EDITOR_MOVE_ALL_TILES_LEFT_LONG' | translate }}" [attr.aria-label]="'EDITOR_MOVE_ALL_TILES_LEFT_LONG' | translate">
								<app-icon-left />
							</button>
							<button type="button" class="icon-button" (click)="this.moveX(1)" title="{{ 'EDITOR_MOVE_ALL_TILES_RIGHT_LONG' | translate }}" [attr.aria-label]="'EDITOR_MOVE_ALL_TILES_RIGHT_LONG' | translate">
								<app-icon-right />
							</button>
						</div>
					</div>
				</div>
				<div class="matrix-preview">
					<app-layout-preview [svg]="svg()"></app-layout-preview>
					@if (this.stats(); as stats) {
						<div class="dimensions">
							<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" x="0px" y="0px" viewBox="0 0 1600 1500">
								<g transform="translate(0, 300)">
									<path fill="#47b00a"
												d="M10,309.7c40.7-99.4,81.5-198.7,122.3-298c39.6,99.2,78.6,198.7,117.9,298c-31.6,0.1-63.2,0-94.8,0.1c0,167-0.1,334.1,0,501.1c148.5-103.4,296.4-207.8,444.8-311.4c-16.9-26.8-37-51.7-53.8-78.5c102.1-22.8,204.1-46,306.2-69C795.4,439.2,738,526.3,680.3,613.2c-17.6-25.2-35.1-50.4-52.9-75.4C480.9,640,334.5,742.4,188.5,845.4c167.8,0.3,335.6,0.1,503.4,0.1c0.1-32.5-0.1-64.9,0.1-97.3c99.4,40.7,198.7,81.5,298,122.3C890.8,910,791.3,949,691.9,988.3c-0.1-31.6,0-63.2-0.1-94.8c-193.7-0.1-387.4-0.1-581.1,0c-1.2,0-2.3-0.5-3.5-0.8c0.1-194.3,0.1-388.6,0-582.9C74.9,309.7,42.5,309.8,10,309.7L10,309.7z"/>
								</g>
								<text x="100" y="1500" fill="#47b00a" style="font: 200px monospace">x{{ stats.minX }} … x{{ stats.maxX }}</text>
								<text x="0" y="200" fill="#47b00a" style="font: 200px monospace">z{{ stats.minZ }} … z{{ stats.maxZ }}</text>
								<text x="600" y="500" fill="#47b00a" style="font: 200px monospace">y{{ stats.minY }} … y{{ stats.maxY }}</text>
							</svg>
						</div>
					}
				</div>
				<div class="solve-panel">
					@if (this.solveWorker()) {
						<button type="button" class="action" (click)="this.cancelSolve()">
							{{ 'EDITOR_TEST_CANCEL' | translate }}
						</button>
					} @else {
						<button type="button" class="action" (click)="this.solve()">
							<app-icon-execute />
							<span>{{ 'EDITOR_TEST_RUN' | translate }}</span>
						</button>
					}
					@if (this.solveStats(); as solveStats) {
						<div class="solve-result">
							<span class="chip chip-win">{{ 'EDITOR_TEST_SOLVED' | translate }}: {{ solveStats.won }}</span>
							<span class="chip" [class.chip-fail]="solveStats.fail>0">{{ 'EDITOR_TEST_FAILED' | translate }}: {{ solveStats.fail }}</span>
						</div>
					}
				</div>
			</div>
		</div>
	</div>
}
<app-dialog
	[(visible)]="saveDialog"
	(keydown.escape)="toggleSave()"
	className="overlay-save overlay-size-medium"
	[title]="('EDITOR_SAVE' | translate) + ' / ' + ('EDITOR_EXPORT' | translate)"
>
	@if (saveDialog()) {
		<app-editor-export-component [layout]="layout()" (savedEvent)="toggleAfterSave()"></app-editor-export-component>
	}
</app-dialog>