<ng-container *transloco="let t; prefix: 'settingsReader.cbx'">
  <div class="cbx-preferences-container">
    <div class="setting-item">
      <div class="setting-info">
        <div class="setting-label-row">
          <label class="setting-label">{{ t('pageSpread') }}</label>
          <div class="button-group">
            @for (spread of cbxSpreads; track spread) {
              <button
                type="button"
                class="option-button"
                [class.selected]="selectedCbxSpread === spread.key"
                (click)="selectedCbxSpread = spread.key">
                <i [class]="spread.icon"></i>
                <span class="option-text">{{ t(spread.translationKey) }}</span>
              </button>
            }
          </div>
        </div>
        <p class="setting-description">
          {{ t('pageSpreadDesc') }}
        </p>
      </div>
    </div>

    <div class="setting-item">
      <div class="setting-info">
        <div class="setting-label-row">
          <label class="setting-label">{{ t('pageLayout') }}</label>
          <div class="button-group">
            @for (mode of cbxViewModes; track mode) {
              <button
                type="button"
                class="option-button"
                [class.selected]="selectedCbxViewMode === mode.key"
                (click)="selectedCbxViewMode = mode.key">
                <i [class]="mode.icon"></i>
                <span class="option-text">{{ t(mode.translationKey) }}</span>
              </button>
            }
          </div>
        </div>
        <p class="setting-description">
          {{ t('pageLayoutDesc') }}
        </p>
      </div>
    </div>

    <div class="setting-item">
      <div class="setting-info">
        <div class="setting-label-row">
          <label class="setting-label">{{ t('fitMode') }}</label>
          <div class="button-group">
            @for (mode of cbxFitModes; track mode) {
              <button
                type="button"
                class="option-button"
                [class.selected]="selectedCbxFitMode === mode.key"
                (click)="selectedCbxFitMode = mode.key"
                [pTooltip]="t(mode.translationKey)"
                tooltipPosition="bottom">
                <i [class]="mode.icon"></i>
                <span class="option-text">{{ t(mode.translationKey) }}</span>
              </button>
            }
          </div>
        </div>
        <p class="setting-description">
          {{ t('fitModeDesc') }}
        </p>
      </div>
    </div>

    <div class="setting-item">
      <div class="setting-info">
        <div class="setting-label-row">
          <label class="setting-label">{{ t('scrollMode') }}</label>
          <div class="button-group">
            @for (mode of cbxScrollModes; track mode) {
              <button
                type="button"
                class="option-button"
                [class.selected]="selectedCbxScrollMode === mode.key"
                (click)="selectedCbxScrollMode = mode.key">
                <i [class]="mode.icon"></i>
                <span class="option-text">{{ t(mode.translationKey) }}</span>
              </button>
            }
          </div>
        </div>
        <p class="setting-description">
          {{ t('scrollModeDesc') }}
        </p>
      </div>
    </div>

    <div class="setting-item">
      <div class="setting-info">
        <div class="setting-label-row">
          <label class="setting-label">{{ t('backgroundColor') }}</label>
          <div class="theme-selector">
            @for (color of cbxBackgroundColors; track color) {
              <button
                type="button"
                class="theme-option"
                [class.selected]="selectedCbxBackgroundColor === color.key"
                [style.background-color]="color.color"
                (click)="selectedCbxBackgroundColor = color.key"
                [attr.aria-label]="t(color.translationKey)"
                [pTooltip]="t(color.translationKey)"
                tooltipPosition="bottom">
                @if (selectedCbxBackgroundColor === color.key) {
                  <i class="pi pi-check"></i>
                }
              </button>
            }
          </div>
        </div>
        <p class="setting-description">
          {{ t('backgroundColorDesc') }}
        </p>
      </div>
    </div>
  </div>
</ng-container>
