<ng-container *transloco="let t; prefix: 'readerEbook.settingsDialog'">
<div class="dialog-overlay" (click)="close.emit()">
  <div class="dialog" (click)="$event.stopPropagation()">
    <div class="tabs-row">
      <div class="tabs">
        <button
          class="tab"
          [class.active]="activeTab === 'theme'"
          (click)="activeTab = 'theme'">
          {{ t('themeTab') }}
        </button>
        <button
          class="tab"
          [class.active]="activeTab === 'typography'"
          (click)="activeTab = 'typography'">
          {{ t('typographyTab') }}
        </button>
        <button
          class="tab"
          [class.active]="activeTab === 'layout'"
          (click)="activeTab = 'layout'">
          {{ t('layoutTab') }}
        </button>
      </div>
      <button class="close-btn" (click)="close.emit()">&#10005;</button>
    </div>

    <div class="dialog-body">
      @if (activeTab === 'theme') {
        <div class="tab-content">
          <div class="section-header dark-mode-header">
            {{ t('darkMode') }}
            <span class="mode-switch-wrapper">
              <span class="mode-icon sun" [class.active]="!state.isDark">&#9728;&#65039;</span>
              <button class="switch" [class.active]="state.isDark" (click)="toggleDarkMode()">
                <span class="slider"></span>
              </button>
              <span class="mode-icon moon" [class.active]="state.isDark">&#127769;</span>
            </span>
          </div>

          <div class="section-header">{{ t('themeColors') }}</div>
          <div class="theme-grid">
            @for (theme of themes; track theme.name) {
              <label class="theme-option">
                <input
                  type="radio"
                  name="theme"
                  [value]="theme.name"
                  [checked]="state.theme.name === theme.name"
                  (change)="onThemeChange(theme.name)">
                <div class="theme-card">
                  <div class="theme-colors">
                    <span class="color-swatch" [style.background-color]="state.isDark ? theme.dark.bg : theme.light.bg"></span>
                    <span class="color-swatch" [style.background-color]="state.isDark ? theme.dark.fg : theme.light.fg"></span>
                  </div>
                  <span class="theme-name">{{ theme.label }}</span>
                </div>
              </label>
            }
          </div>

          <div class="section-header">{{ t('annotationHighlighter') }}</div>
          <div class="annotation-colors">
            @for (color of annotationColors; track color.name) {
              <button
                class="color-picker-btn"
                [class.active]="selectedAnnotationColor === color.value"
                [style.background-color]="color.value"
                [attr.aria-label]="color.label"
                (click)="setAnnotationColor(color.value)">
                @if (selectedAnnotationColor === color.value) {
                  <span class="check-icon">&#10003;</span>
                }
              </button>
            }
          </div>
        </div>
      }

      @if (activeTab === 'typography') {
        <div class="tab-content">

          <div class="section-header">{{ t('fontSettings') }}</div>
          <div class="control">
            <label>{{ t('fontSize') }}</label>
            <div class="control-right">
              <div class="stepper">
                <button (click)="decreaseFontSize()">&#8722;</button>
                <span>{{ state.fontSize }}</span>
                <button (click)="increaseFontSize()">+</button>
              </div>
            </div>
          </div>
          <div class="control">
            <label>{{ t('lineHeight') }}</label>
            <div class="control-right">
              <div class="stepper">
                <button (click)="decreaseLineHeight()">&#8722;</button>
                <span>{{ state.lineHeight | number:'1.1-1' }}</span>
                <button (click)="increaseLineHeight()">+</button>
              </div>
            </div>
          </div>

          <div class="section-header">{{ t('fontFamily') }}</div>
          <div class="font-grid">
            @for (font of fonts; track font.value) {
              <button
                class="font-option"
                [class.active]="state.fontFamily === font.value"
                [style.font-family]="font.value ? getFontFamilyForPreview(font.value) : 'inherit'"
                (click)="setFontFamily(font.value)">
                <span class="font-preview">Aa</span>
                <span class="font-name">{{ font.name }}</span>
              </button>
            }
          </div>
        </div>
      }

      @if (activeTab === 'layout') {
        <div class="tab-content">
          <div class="section-header">{{ t('layout') }}</div>

          <div class="control">
            <label>{{ t('readingFlow') }}</label>
            <div class="control-right">
              <div class="radio-group">
                <label>
                  <input
                    type="radio"
                    name="flow"
                    value="paginated"
                    [checked]="state.flow === 'paginated'"
                    (change)="setFlow('paginated')"
                  />
                  {{ t('paginated') }}
                </label>
                <label>
                  <input
                    type="radio"
                    name="flow"
                    value="scrolled"
                    [checked]="state.flow === 'scrolled'"
                    (change)="setFlow('scrolled')"
                  />
                  {{ t('scrolled') }}
                </label>
              </div>
            </div>
          </div>

          <div class="control">
            <label>{{ t('maxColumns') }}</label>
            <div class="control-right">
              <div class="stepper">
                <button (click)="decreaseMaxColumnCount()">&#8722;</button>
                <span>{{ state.maxColumnCount }}</span>
                <button (click)="increaseMaxColumnCount()">+</button>
              </div>
            </div>
          </div>

          <div class="control">
            <label>{{ t('columnGap') }}</label>
            <div class="control-right gap-control">
              <input
                #gapInput
                type="range"
                min="0"
                max="0.5"
                step="0.01"
                [value]="state.gap"
                (input)="setGap(gapInput.valueAsNumber)"
              />
              <span class="value">{{ (state.gap * 100) | number : '1.0-0' }}%</span>
            </div>
          </div>

          <div class="control">
            <label>{{ t('maxWidth') }}</label>
            <div class="control-right">
              <div class="stepper">
                <button (click)="decreaseMaxInlineSize()">&#8722;</button>
                <span>{{ state.maxInlineSize }}</span>
                <button (click)="increaseMaxInlineSize()">+</button>
              </div>
            </div>
          </div>

          <div class="control">
            <label>{{ t('maxHeight') }}</label>
            <div class="control-right">
              <div class="stepper">
                <button (click)="decreaseMaxBlockSize()">&#8722;</button>
                <span>{{ state.maxBlockSize }}</span>
                <button (click)="increaseMaxBlockSize()">+</button>
              </div>
            </div>
          </div>

          <div class="section-header">{{ t('textOptions') }}</div>

          <div class="toggle-control">
            <span>{{ t('justifyText') }}</span>
            <button class="switch" [class.active]="state.justify" (click)="toggleJustify()">
              <span class="slider"></span>
            </button>
          </div>

          <div class="toggle-control">
            <span>{{ t('hyphenate') }}</span>
            <button class="switch" [class.active]="state.hyphenate" (click)="toggleHyphenate()">
              <span class="slider"></span>
            </button>
          </div>
        </div>
      }
    </div>
  </div>
</div>
</ng-container>
