<ng-container *transloco="let t; prefix: 'settingsApp'">
<div class="main-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-cog"></i>
      {{ t('title') }}
    </h2>
    <p class="settings-description">
      {{ t('description') }}
    </p>
  </div>

  <div class="settings-content">
    <div class="preferences-section">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-palette"></i>
          {{ t('appearance.sectionTitle') }}
        </h3>
      </div>

      <div class="settings-card">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">{{ t('appearance.supportButtonAnimation') }}</label>
              <p-toggleswitch
                [(ngModel)]="supportButtonAnimation"
                (onChange)="onSupportAnimationChange($event.checked)">
              </p-toggleswitch>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              {{ t('appearance.supportButtonAnimationDesc') }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="preferences-section">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-image"></i>
          {{ t('covers.sectionTitle') }}
        </h3>
      </div>

      <div class="settings-card">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">{{ t('covers.regenerate') }}</label>
              <p-splitbutton
                [label]="t('covers.regenerateAllBtn')"
                icon="pi pi-refresh"
                outlined="true"
                size="small"
                severity="info"
                [model]="regenerateCoverMenuItems"
                (onClick)="regenerateCovers()">
              </p-splitbutton>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              {{ t('covers.regenerateDesc') }}
            </p>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">{{ t('covers.verticalCropping') }}</label>
              <p-toggleswitch
                [(ngModel)]="coverCroppingSettings.verticalCroppingEnabled"
                (onChange)="onCoverCroppingChange()">
              </p-toggleswitch>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              {{ t('covers.verticalCroppingDesc') }}
            </p>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">{{ t('covers.horizontalCropping') }}</label>
              <p-toggleswitch
                [(ngModel)]="coverCroppingSettings.horizontalCroppingEnabled"
                (onChange)="onCoverCroppingChange()">
              </p-toggleswitch>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              {{ t('covers.horizontalCroppingDesc') }}
            </p>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">{{ t('covers.aspectRatio', {value: coverCroppingSettings.aspectRatioThreshold}) }}</label>
              <div class="slider-container">
                <p-slider
                  [(ngModel)]="coverCroppingSettings.aspectRatioThreshold"
                  [min]="1.5"
                  [max]="3"
                  [step]="0.1"
                  (onSlideEnd)="onCoverCroppingChange()">
                </p-slider>
              </div>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              {{ t('covers.aspectRatioDesc') }}
            </p>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">{{ t('covers.smartCropping') }}</label>
              <p-toggleswitch
                [(ngModel)]="coverCroppingSettings.smartCroppingEnabled"
                (onChange)="onCoverCroppingChange()">
              </p-toggleswitch>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              {{ t('covers.smartCroppingDesc') }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="preferences-section">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-search"></i>
          {{ t('search.sectionTitle') }}
        </h3>
      </div>

      <div class="settings-card">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">{{ t('search.autoBookSearch') }}</label>
              <p-toggleswitch
                [(ngModel)]="toggles.autoBookSearch"
                (onChange)="onToggleChange('autoBookSearch', $event.checked)">
              </p-toggleswitch>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              {{ t('search.autoBookSearchDesc') }}
            </p>
          </div>
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">{{ t('search.similarBook') }}</label>
              <p-toggleswitch
                [(ngModel)]="toggles.similarBookRecommendation"
                (onChange)="onToggleChange('similarBookRecommendation', $event.checked)">
              </p-toggleswitch>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              {{ t('search.similarBookDesc') }}
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="preferences-section">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-upload"></i>
          {{ t('fileManagement.sectionTitle') }}
        </h3>
      </div>

      <div class="settings-card">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-label-row">
              <label class="setting-label">{{ t('fileManagement.maxUploadSize') }}</label>
              <div class="input-group">
                <div class="input-with-unit">
                  <input
                    type="text"
                    pInputText
                    [(ngModel)]="maxFileUploadSizeInMb"
                    [placeholder]="t('fileManagement.maxUploadPlaceholder')"/>
                  <span class="unit">MB</span>
                </div>
                <p-button [label]="'common.save' | transloco" outlined severity="success" (onClick)="saveFileSize()"></p-button>
              </div>
            </div>
            <p class="setting-description">
              <i class="pi pi-info-circle"></i>
              {{ t('fileManagement.maxUploadDesc') }}
            </p>
            <div class="warning-message">
              <i class="pi pi-exclamation-triangle"></i>
              <span>{{ t('fileManagement.restartWarning') }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
</ng-container>
