@for (tab of tabs; track tab.id) {
	<input class="tabs-input" type="radio" name="settings-tab"
		[id]="`tab-${tab.id}`"
		role="tab"
		[attr.aria-selected]="selectedTab() === tab.id"
		[attr.aria-controls]="'panel-'+tab.id"
		[checked]="selectedTab() === tab.id"
		(change)="setSelectedTab(tab.id)"/>
}
<div class="tabs-labels" role="tablist" [attr.aria-label]="'SETTINGS_TABS' | translate">
	@for (tab of tabs; track tab.id) {
		<label [id]="`tab-${tab.id}-label`" [for]="`tab-${tab.id}`">{{ tab.name | translate }}</label>
	}
</div>
<div class="tabs-panels panels">
	<section id="panel-lang" class="panel" role="tabpanel" aria-labelledby="tab-lang-label">
		<fieldset>
			<legend id="lang-legend">{{ 'LANG' | translate }}</legend>
			<ul class="radio radio-lang" role="group" aria-labelledby="lang-legend">
				<li>
					<input
						type="radio" name="lang" id="lang0" value="auto"
						[checked]="( app.settings.lang() === 'auto' )"
						(change)="app.settings.lang.set('auto'); app.setLang();"
						[attr.aria-label]="'LANG_AUTO' | translate"
					/>
					<label for="lang0">{{ 'LANG_AUTO' | translate }}</label>
				</li>
				@for (lang of languages; track lang; let i = $index) {
					<li>
						<input
							type="radio" name="lang" [id]="'lang'+(i+1)" [value]="lang.key"
							[checked]="( app.settings.lang() === lang.key )"
							(change)="app.settings.lang.set(lang.key);app.setLang();"
							[attr.aria-label]="lang.title"
						/>
						<label [for]="'lang'+(i+1)">{{ lang.title }}</label>
					</li>
				}
			</ul>
		</fieldset>
	</section>

	<section id="panel-stones" class="panel" role="tabpanel" aria-labelledby="tab-stones-label">
		<fieldset>
			<legend id="tileset-legend">{{ 'TILESET' | translate }}</legend>
			<ul class="radio radio-tilesets" role="group" aria-labelledby="tileset-legend">
				@for (imageset of sets; track imageset; let i = $index) {
					<li>
						<input
							type="radio" name="imageset" id="imageset{{i}}" [value]="imageset.id"
							[checked]="app.settings.tileset() === imageset.id"
							(change)="app.settings.tileset.set(imageset.id);app.settings.save();"
							[attr.aria-label]="imageset.name"
						/>
						<label for="imageset{{i}}">
							{{ imageset.name }}
						</label>
						<app-license-link
							link="https://github.com/ffalt/mah/blob/main/src/assets/svg/README.md#{{ imageset.id }}svg"
							[licenseKey]="imageset.license"
							[subject]="imageset.name"
							[tabbable]="app.settings.tileset() === imageset.id"
						></app-license-link>
					</li>
				}
				@if (canKyodai) {
					<li>
						<input
							type="radio" name="imageset" value="kyodai" id="imageset-kyodai"
							[checked]="app.settings.tileset() === 'kyodai'"
							(change)="app.settings.tileset.set('kyodai');app.settings.save();"
							[attr.aria-label]="'KYODAI_TILESET' | translate"
						/>
						<label for="imageset-kyodai">{{ 'KYODAI_TILESET' | translate }}</label>
					</li>
				}
			</ul>
		</fieldset>

		@if (canKyodai && app.settings.tileset() === 'kyodai') {
			<fieldset class="kyodai-settings">
				<legend id="kyodai-legend">{{ 'KYODAI_TILESET_SETTINGS' | translate }}</legend>
				<div class="input-wrapper">
								<textarea
									#kyodaiInput name="kyodai"
									[value]="app.settings.kyodaiUrl() ? app.settings.kyodaiUrl() : ''"
									(change)="updateKyodaiUrl($event)"
									aria-labelledby="kyodai-legend"
									placeholder="{{ 'KYODAI_TILESET_URL_PLACEHOLDER' | translate }}"
								></textarea>
					<button type="button"
						class="clear-kyodai"
						(click)="clearKyodaiUrl()"
						title="{{ 'KYODAI_TILESET_CLEAR' | translate }}"
						[attr.aria-label]="'KYODAI_TILESET_CLEAR' | translate">
						<svg width="17px" height="17px" viewBox="0 0 35 35" aria-hidden="true">
							<path d="M28.814,30.064a1.247,1.247,0,0,1-.884-.367L5.3,7.07A1.249,1.249,0,0,1,7.07,5.3L29.7,27.93a1.251,1.251,0,0,1-.884,2.134Z"/>
							<path d="M6.186,30.064A1.251,1.251,0,0,1,5.3,27.93L27.93,5.3A1.25,1.25,0,0,1,29.7,7.07L7.07,29.7A1.247,1.247,0,0,1,6.186,30.064Z"/>
						</svg>
					</button>
					<select
						class="example-kyodai"
						(change)="setKyodaiUrl($event)"
						[attr.aria-label]="'KYODAI_TILESET_EXAMPLES' | translate"
					>
						<option value="">{{ 'KYODAI_TILESET_EXAMPLES' | translate }}</option>
						@for (k of kyodaiTileSets; track k.source) {
							<option [value]="k.source">{{ k.name }} - {{ k.author }}</option>
						}
					</select>
				</div>
				<button type="button" (click)="applyKyodaiUrl()" [attr.aria-label]="'KYODAI_TILESET_LOAD' | translate">
					{{ 'KYODAI_TILESET_LOAD' | translate }}
				</button>
			</fieldset>
		}

		<fieldset>
			<legend id="tiles-legend">{{ 'TILES' | translate }}</legend>
			<div class="tile-preview-row">
				<ul class="checks" role="group" aria-labelledby="tiles-legend">
					<li>
						<label class="check">
							<input
								type="checkbox"
								[checked]="app.settings.tile3d()"
								(change)="app.settings.tile3d.set(!app.settings.tile3d());app.settings.save();"
							>
							<span>{{ 'TILES_3D' | translate }}</span>
						</label>
					</li>
					<li>
						<label class="check">
							<input
								type="checkbox"
								[checked]="app.settings.shadows()"
								(change)="app.settings.shadows.set(!app.settings.shadows());app.settings.save();"
							>
							<span>{{ 'TILES_SHADOWS' | translate }}</span>
						</label>
					</li>
					<li>
						<label class="check">
							<input
								type="checkbox"
								[checked]="app.settings.contrast()"
								(change)="app.settings.contrast.set(!app.settings.contrast());app.settings.save();"
							>
							<span>{{ 'HIGHER_CONTRAST' | translate }}</span>
						</label>
					</li>
					<li>
						<label class="check">
							<input
								type="checkbox"
								[checked]="app.settings.dark()"
								(change)="app.settings.dark.set(!app.settings.dark());app.settings.save();"
							>
							<span>{{ 'TILES_DARK' | translate }}</span>
						</label>
					</li>
				</ul>
				<app-tile-preview
						[tile]="'t_dr_red'"
						[tileset]="app.settings.tileset()"
						[kyodaiUrl]="app.settings.kyodaiUrl()"
						[dark]="app.settings.dark()"
						[contrast]="app.settings.contrast()"
						[tile3d]="app.settings.tile3d()"
						[animations]="app.settings.dailyAnimations()"
						[shadows]="app.settings.shadows()"/>
			</div>
		</fieldset>
	</section>

	<section id="panel-theme" class="panel" role="tabpanel" aria-labelledby="tab-theme-label">
		<fieldset>
			<legend id="theme-legend">{{ 'THEME' | translate }}</legend>
			<ul class="radio radio-themes" role="group" aria-labelledby="theme-legend">
				@for (theme of themes; track theme; let i = $index) {
					<li>
						<input
							type="radio" name="color" id="color{{i}}" [value]="theme.id"
							[checked]="app.settings.theme() === theme.id"
							(change)="app.settings.theme.set(theme.id || '');app.settings.save();"
							[attr.aria-label]="theme.name | translate"
						/>
						<label for="color{{i}}">{{ theme.name | translate }}</label>

						<div class="theme-preview-wrapper">
							<div class="theme-preview" [class]="'theme-'+theme.id"></div>
						</div>
					</li>
				}
			</ul>
		</fieldset>
	</section>

	<section id="panel-background" class="panel" role="tabpanel" aria-labelledby="tab-background-label">
		<fieldset>
			<legend id="background-legend">{{ 'BACKGROUND' | translate }}</legend>
			<ul class="radio" role="group" aria-labelledby="background-legend">
				@for (back of backs; track back; let i = $index) {
					<li>
						<input
							type="radio" name="back" id="back{{i}}" [value]="back.img"
							[checked]="app.settings.background() === back.img"
							(change)="setBackground(back.img)"
							[attr.aria-label]="back.name | translate"
						/>
						<label for="back{{i}}">{{ back.name | translate }}</label>
						@if (back.license) {
							@if (back.type === 'MAH') {
								<app-license-link
									link="https://github.com/ffalt/mah/blob/main/src/assets/patterns/README.md"
									[licenseKey]="back.license"
									[subject]="back.name | translate"
									[tabbable]="app.settings.background() === back.img"
								></app-license-link>
							} @else {
								<app-license-link
									link="https://github.com/ffalt/mah/blob/main/src/assets/img/README.md#{{ back.img }}jpg"
									[licenseKey]="back.license"
									[subject]="back.name | translate"
									[tabbable]="app.settings.background() === back.img"
								></app-license-link>
							}
						}
					</li>
				}
			</ul>
		</fieldset>
		@if (app.settings.background() === PatternBackground) {
			<fieldset class="pattern-settings">
				<legend id="pattern-legend">{{ 'PATTERN_SETTINGS' | translate }}</legend>
				<ul class="radio radio-patterns" role="group" aria-labelledby="pattern-legend">
					@for (pattern of patterns; track pattern; let i = $index) {
						<li>
							<input
								type="radio" name="pattern" id="pattern{{i}}" [value]="pattern.id"
								[checked]="app.settings.pattern() === pattern.id"
								(change)="app.settings.pattern.set(pattern.id);app.settings.save();"
								[attr.aria-label]="pattern.title"
							/>
							<label for="pattern{{i}}">{{ pattern.title }}</label>
						</li>
					}
				</ul>
			</fieldset>
		}
	</section>

	<section id="panel-ui" class="panel" role="tabpanel" aria-labelledby="tab-ui-label">
		<fieldset>
			<legend id="ui-legend">{{ 'UI' | translate }}</legend>
			<ul class="checks" role="group" aria-labelledby="ui-legend">
				<li>
					<label class="check">
						<input
							type="checkbox"
							[checked]="app.settings.showClock()"
							(change)="app.settings.showClock.set(!app.settings.showClock());app.settings.save();"
						>
						<span>{{ 'SHOW_CLOCK' | translate }}</span>
					</label>
				</li>
				@if (canDaily) {
					<li>
						<label class="check">
							<input
								type="checkbox"
								[checked]="app.settings.showDailyChallenge()"
								(change)="app.settings.showDailyChallenge.set(!app.settings.showDailyChallenge());app.settings.save();"
							>
							<span>{{ 'SHOW_DAILY_CHALLENGE' | translate }}</span>
						</label>
					</li>
				}
				<li>
					<label class="check">
						<input
							type="checkbox"
							[checked]="app.settings.rotateBoard()"
							(change)="app.settings.rotateBoard.set(!app.settings.rotateBoard());app.settings.save();"
						>
						<span>{{ 'ROTATE_BOARD' | translate }}</span>
					</label>
				</li>
				<li>
					<label class="check">
						<input
							type="checkbox"
							[checked]="app.settings.zoomBoard()"
							(change)="app.settings.zoomBoard.set(!app.settings.zoomBoard());app.settings.save();"
						>
						<span>{{ 'ZOOM_BOARD' | translate }}</span>
					</label>
				</li>
			</ul>
		</fieldset>
		<fieldset class="animations">
			<legend id="animations-legend">{{ 'ANIMATIONS' | translate }}</legend>
			<small class="animations-note">{{ 'TILE_ANIMATIONS_REDUCED_MOTION' | translate }}</small>
			<ul class="checks" role="group" aria-labelledby="animations-legend">
				<li>
					<label class="check">
						<input
							type="checkbox"
							[checked]="app.settings.confetti() && !reducedMotion()"
							[disabled]="reducedMotion()"
							(change)="app.settings.confetti.set(!app.settings.confetti());app.settings.save();"
						>
						<span>{{ 'VICTORY_CONFETTI' | translate }}</span>
					</label>
				</li>
				<li>
					<label class="check">
						<input
							type="checkbox"
							[checked]="app.settings.tileAnimations() && !reducedMotion()"
							[disabled]="reducedMotion()"
							(change)="app.settings.tileAnimations.set(!app.settings.tileAnimations());app.settings.save();"
						>
						<span>{{ 'BOARD_ANIMATIONS' | translate }}</span>
					</label>
				</li>
				<li>
					<label class="check">
						<input
							type="checkbox"
							[checked]="app.settings.hintAnimations() && !reducedMotion()"
							[disabled]="reducedMotion()"
							(change)="app.settings.hintAnimations.set(!app.settings.hintAnimations());app.settings.save();"
						>
						<span>{{ 'HINT_ANIMATIONS' | translate }}</span>
					</label>
				</li>
				@if (canDaily) {
					<li>
						<label class="check">
							<input
								type="checkbox"
								[checked]="app.settings.dailyAnimations() && !reducedMotion()"
								[disabled]="reducedMotion()"
								(change)="app.settings.dailyAnimations.set(!app.settings.dailyAnimations());app.settings.save();"
							>
							<span>{{ 'TILE_ANIMATIONS' | translate }}</span>
						</label>
					</li>
				}
			</ul>
		</fieldset>
	</section>
</div>