<ng-container *transloco="let t; prefix: 'settingsReader.ebook'">
  <div class="epub-preferences-container">

    <div class="settings-group">
      <h3 class="group-title">{{ t('appearance') }}</h3>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('theme') }}</label>
            <div class="theme-selector">
              @for (theme of themes; track theme) {
                <button
                  type="button"
                  class="theme-option"
                  [class.selected]="selectedTheme === theme.name"
                  (click)="selectedTheme = theme.name"
                  [attr.aria-label]="theme.label"
                  [pTooltip]="theme.label"
                  tooltipPosition="bottom">
                  <span class="theme-colors">
                    <span class="theme-color" [style.background-color]="theme.light.bg"></span>
                    <span class="theme-color" [style.background-color]="theme.dark.bg"></span>
                  </span>
                  @if (selectedTheme === theme.name) {
                    <i class="pi pi-check"></i>
                  }
                </button>
              }
            </div>
          </div>
          <p class="setting-description">
            {{ t('themeDesc') }}
          </p>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('darkMode') }}</label>
            <div class="button-group">
              <button
                type="button"
                class="option-button"
                [class.selected]="!isDark"
                (click)="isDark = false">
                <i class="pi pi-sun"></i>
                <span class="option-text">{{ t('light') }}</span>
              </button>
              <button
                type="button"
                class="option-button"
                [class.selected]="isDark"
                (click)="isDark = true">
                <i class="pi pi-moon"></i>
                <span class="option-text">{{ t('dark') }}</span>
              </button>
            </div>
          </div>
          <p class="setting-description">
            {{ t('darkModeDesc') }}
          </p>
        </div>
      </div>
    </div>

    <div class="settings-group">
      <h3 class="group-title">{{ t('typography') }}</h3>
      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('fontFamily') }}</label>
            <div class="button-group">
              @for (font of fonts; track font) {
                <button
                  type="button"
                  class="option-button font-button"
                  [class.selected]="selectedFont === font.key"
                  [class.separator]="font.key === 'separator'"
                  [attr.data-font]="font.key"
                  [disabled]="font.key === 'separator'"
                  (click)="selectedFont = font.key"
                  [pTooltip]="font.name"
                  tooltipPosition="bottom">
                  <span class="option-text" [style.font-family]="font.key && font.key.startsWith('custom:') ? getCustomFontName(font.key) : null">
                    {{ font.displayName }}
                  </span>
                </button>
              }

              @if (!customFontsReady) {
                <p-skeleton width="3.5rem" height="2.5rem" borderRadius="6px"></p-skeleton>
              }
            </div>
          </div>
          <p class="setting-description">
            {{ t('fontFamilyDesc') }}
          </p>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('fontSize') }}</label>
            <div class="font-size-controls">
              <p-button icon="pi pi-minus" size="small" rounded outlined (click)="decreaseFontSize()"></p-button>
              <span class="font-size-value">{{ fontSize }}pt</span>
              <p-button icon="pi pi-plus" size="small" rounded outlined (click)="increaseFontSize()"></p-button>
            </div>
          </div>
          <p class="setting-description">
            {{ t('fontSizeDesc') }}
          </p>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('lineHeight') }}</label>
            <div class="font-size-controls">
              <p-button icon="pi pi-minus" size="small" rounded outlined (click)="decreaseLineHeight()"></p-button>
              <span class="font-size-value">{{ lineHeight.toFixed(1) }}</span>
              <p-button icon="pi pi-plus" size="small" rounded outlined (click)="increaseLineHeight()"></p-button>
            </div>
          </div>
          <p class="setting-description">
            {{ t('lineHeightDesc') }}
          </p>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('textJustification') }}</label>
            <div class="button-group">
              <button
                type="button"
                class="option-button"
                [class.selected]="!justify"
                (click)="justify = false">
                <i class="pi pi-align-left"></i>
                <span class="option-text">{{ t('left') }}</span>
              </button>
              <button
                type="button"
                class="option-button"
                [class.selected]="justify"
                (click)="justify = true">
                <i class="pi pi-align-justify"></i>
                <span class="option-text">{{ t('justified') }}</span>
              </button>
            </div>
          </div>
          <p class="setting-description">
            {{ t('textJustificationDesc') }}
          </p>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('hyphenation') }}</label>
            <div class="button-group">
              <button
                type="button"
                class="option-button"
                [class.selected]="!hyphenate"
                (click)="hyphenate = false">
                <i class="pi pi-times"></i>
                <span class="option-text">{{ t('off') }}</span>
              </button>
              <button
                type="button"
                class="option-button"
                [class.selected]="hyphenate"
                (click)="hyphenate = true">
                <i class="pi pi-check"></i>
                <span class="option-text">{{ t('on') }}</span>
              </button>
            </div>
          </div>
          <p class="setting-description">
            {{ t('hyphenationDesc') }}
          </p>
        </div>
      </div>
    </div>

    <div class="settings-group">
      <h3 class="group-title">{{ t('layout') }}</h3>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('flow') }}</label>
            <div class="button-group">
              <button
                type="button"
                class="option-button"
                [class.selected]="flow === 'paginated'"
                (click)="flow = 'paginated'">
                <i class="pi pi-clone"></i>
                <span class="option-text">{{ t('paginated') }}</span>
              </button>
              <button
                type="button"
                class="option-button"
                [class.selected]="flow === 'scrolled'"
                (click)="flow = 'scrolled'">
                <i class="pi pi-arrows-v"></i>
                <span class="option-text">{{ t('scrolled') }}</span>
              </button>
            </div>
          </div>
          <p class="setting-description">
            {{ t('flowDesc') }}
          </p>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('maxColumns') }}</label>
            <div class="font-size-controls">
              <p-button icon="pi pi-minus" size="small" rounded outlined (click)="maxColumnCount = maxColumnCount > 1 ? maxColumnCount - 1 : 1"></p-button>
              <span class="font-size-value">{{ maxColumnCount }}</span>
              <p-button icon="pi pi-plus" size="small" rounded outlined (click)="maxColumnCount = maxColumnCount < 4 ? maxColumnCount + 1 : 4"></p-button>
            </div>
          </div>
          <p class="setting-description">
            {{ t('maxColumnsDesc') }}
          </p>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('columnGap') }}</label>
            <div class="font-size-controls">
              <p-button icon="pi pi-minus" size="small" rounded outlined (click)="decreaseGap()"></p-button>
              <span class="font-size-value">{{ gap * 100 | number : '1.0-0' }}%</span>
              <p-button icon="pi pi-plus" size="small" rounded outlined (click)="increaseGap()"></p-button>
            </div>
          </div>
          <p class="setting-description">
            {{ t('columnGapDesc') }}
          </p>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('maxWidth') }}</label>
            <div class="font-size-controls">
              <p-button icon="pi pi-minus" size="small" rounded outlined (click)="decreaseMaxInlineSize()"></p-button>
              <span class="font-size-value">{{ maxInlineSize }}px</span>
              <p-button icon="pi pi-plus" size="small" rounded outlined (click)="increaseMaxInlineSize()"></p-button>
            </div>
          </div>
          <p class="setting-description">
            {{ t('maxWidthDesc') }}
          </p>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-info">
          <div class="setting-label-row">
            <label class="setting-label">{{ t('maxHeight') }}</label>
            <div class="font-size-controls">
              <p-button icon="pi pi-minus" size="small" rounded outlined (click)="decreaseMaxBlockSize()"></p-button>
              <span class="font-size-value">{{ maxBlockSize }}px</span>
              <p-button icon="pi pi-plus" size="small" rounded outlined (click)="increaseMaxBlockSize()"></p-button>
            </div>
          </div>
          <p class="setting-description">
            {{ t('maxHeightDesc') }}
          </p>
        </div>
      </div>
    </div>
  </div>
</ng-container>
