@if (layout()) {
	<div class="section">
		<div class="inputs">
			<label for="editor-layout-name">{{ 'EDITOR_LAYOUT_NAME' | translate }}</label>
			<input
				id="editor-layout-name" type="text"
				[value]="layout().name"
				(input)="this.updateName($any($event.target).value)"
			>
			<label for="editor-layout-by">{{ 'EDITOR_LAYOUT_BY' | translate }}</label>
			<input
				id="editor-layout-by" type="text"
				[value]="layout().by"
				(input)="this.updateBy($any($event.target).value)"
			>
			<label for="editor-layout-category">{{ 'EDITOR_LAYOUT_CATEGORY' | translate }}</label>
			<input
				id="editor-layout-category" type="text"
				[value]="layout().category"
				(input)="this.updateCat($any($event.target).value)"
			>
		</div>
		<div class="preview">
			<app-layout-preview [layout]="layout()"></app-layout-preview>
		</div>
	</div>
}
<div class="export">
	<fieldset>
		<legend>{{ 'EDITOR_EXPORT_FORMAT' | translate }}</legend>
		<ul>
			@for (ef of exportFormats; track ef) {
				<li>
					<input
						[id]="'format_'+ef.name"
						type="radio"
						[value]="ef" name="format"
						[checked]="( format() === ef )"
						(change)="chooseFormat(ef);"
					>
					<label [for]="'format_'+ef.name">{{ ef.label | translate }}</label>
				</li>
			}
		</ul>
	</fieldset>
	<div class="export-preview">
		<pre>{{ this.result() }}</pre>
	</div>
	<div class="export-filename">
		{{ filename() }}
	</div>
	<div class="buttons">
		<button type="button" class="text-button" (click)="download()">{{ 'EDITOR_LAYOUT_DOWNLOAD' | translate }}</button>
		@if (this.layout() && this.layout().originalId && exportLayout()?.id !== this.layout().originalId) {
			<button type="button" class="text-button" (click)="saveAsCopy()">{{ 'EDITOR_LAYOUT_SAVE_AS_COPY' | translate }}</button>
		}
		<button type="button" class="text-button" (click)="save()">{{ 'EDITOR_LAYOUT_SAVE' | translate }}</button>
	</div>
</div>