<ng-container *transloco="let t; prefix: 'settingsMeta.persistence'">
  <div class="settings-card">
    <div class="section-header">
      <h3 class="section-title">
        <i class="pi pi-save"></i>
        {{ t('sectionTitle') }}
      </h3>
      <p class="section-description">
        {{ t('sectionDesc') }}
      </p>
    </div>

    @if (isNetworkStorage) {
      <div class="section-notice">
        <div class="info-notice">
          <i class="pi pi-lock"></i>
          <div>
            <strong>{{ t('networkModeTitle') }}</strong> {{ t('networkModeDesc') }}
          </div>
        </div>
      </div>
    } @else {
      <div class="section-notice">
        <div class="warning-notice">
          <i class="pi pi-exclamation-triangle"></i>
          <div>
            <strong>{{ t('networkWarningTitle') }}</strong> {{ t('networkWarning') }}
          </div>
        </div>
        <div class="info-notice unsupported-formats-note">
          <i class="pi pi-info-circle"></i>
          <div>
            <strong>Note:</strong> <span [innerHTML]="t('unsupportedNote')"></span>
          </div>
        </div>
      </div>
    }

    <div class="section-body" [class.network-disabled]="isNetworkStorage">
      <div class="setting-item">
        <div class="setting-header">
          <p-toggleswitch
            [ngModel]="metadataPersistence.saveToOriginalFile.epub.enabled"
            (onChange)="onSaveToOriginalFileToggle('epub')"
            [disabled]="isNetworkStorage">
          </p-toggleswitch>
          <label class="setting-label">{{ t('writeEpub') }}</label>
        </div>
        <p class="setting-description">{{ t('writeEpubDesc') }}</p>
        @if (metadataPersistence.saveToOriginalFile.epub.enabled) {
          <div class="setting-options">
            <div class="filesize-input">
              <label>{{ t('maxFileSize') }}</label>
              <input
                type="number"
                [(ngModel)]="metadataPersistence.saveToOriginalFile.epub.maxFileSizeInMb"
                (change)="onFilesizeChange('epub')"
                min="1"
                max="1000"
                class="filesize-field">
              <span class="filesize-unit">MB</span>
              <i
                class="pi pi-info-circle"
                [pTooltip]="t('maxFileSizeTooltip')"
                tooltipPosition="right">
              </i>
            </div>
          </div>
        }
      </div>

      <div class="setting-item">
        <div class="setting-header">
          <p-toggleswitch
            [ngModel]="metadataPersistence.saveToOriginalFile.cbx.enabled"
            (onChange)="onSaveToOriginalFileToggle('cbx')"
            [disabled]="isNetworkStorage">
          </p-toggleswitch>
          <label class="setting-label">{{ t('writeCbx') }}</label>
        </div>
        <p class="setting-description">{{ t('writeCbxDesc') }}</p>
        @if (metadataPersistence.saveToOriginalFile.cbx.enabled) {
          <div class="setting-options">
            <div class="filesize-input">
              <label>{{ t('maxFileSize') }}</label>
              <input
                type="number"
                [(ngModel)]="metadataPersistence.saveToOriginalFile.cbx.maxFileSizeInMb"
                (change)="onFilesizeChange('cbx')"
                min="1"
                max="1000"
                class="filesize-field">
              <span class="filesize-unit">MB</span>
              <i
                class="pi pi-info-circle"
                [pTooltip]="t('maxFileSizeTooltip')"
                tooltipPosition="right">
              </i>
            </div>
          </div>
        }
      </div>

      <div class="setting-item">
        <div class="setting-header">
          <p-toggleswitch
            [ngModel]="metadataPersistence.saveToOriginalFile.pdf.enabled"
            (onChange)="onSaveToOriginalFileToggle('pdf')"
            [disabled]="isNetworkStorage">
          </p-toggleswitch>
          <label class="setting-label">{{ t('writePdf') }}</label>
        </div>
        <p class="setting-description">
          {{ t('writePdfDesc') }}
          <span class="setting-note">{{ t('writePdfNote') }}</span>
        </p>
        @if (metadataPersistence.saveToOriginalFile.pdf.enabled) {
          <div class="setting-options">
            <div class="filesize-input">
              <label>{{ t('maxFileSize') }}</label>
              <input
                type="number"
                [(ngModel)]="metadataPersistence.saveToOriginalFile.pdf.maxFileSizeInMb"
                (change)="onFilesizeChange('pdf')"
                min="1"
                max="1000"
                class="filesize-field">
              <span class="filesize-unit">MB</span>
              <i
                class="pi pi-info-circle"
                [pTooltip]="t('maxFileSizeTooltip')"
                tooltipPosition="right">
              </i>
            </div>
          </div>
        }
      </div>

      <div class="setting-item">
        <div class="setting-header">
          <p-toggleswitch
            [ngModel]="metadataPersistence.saveToOriginalFile.audiobook.enabled"
            (onChange)="onSaveToOriginalFileToggle('audiobook')"
            [disabled]="isNetworkStorage">
          </p-toggleswitch>
          <label class="setting-label">{{ t('writeAudiobook') }}</label>
        </div>
        <p class="setting-description">
          {{ t('writeAudiobookDesc') }}
          <span class="setting-note">{{ t('writeAudiobookNote') }}</span>
        </p>
        @if (metadataPersistence.saveToOriginalFile.audiobook.enabled) {
          <div class="setting-options">
            <div class="filesize-input">
              <label>{{ t('maxFileSize') }}</label>
              <input
                type="number"
                [(ngModel)]="metadataPersistence.saveToOriginalFile.audiobook.maxFileSizeInMb"
                (change)="onFilesizeChange('audiobook')"
                min="1"
                max="2000"
                class="filesize-field">
              <span class="filesize-unit">MB</span>
              <i
                class="pi pi-info-circle"
                [pTooltip]="t('maxFileSizeTooltip')"
                tooltipPosition="right">
              </i>
            </div>
          </div>
        }
      </div>

      @if (!isNetworkStorage) {
        <div class="setting-item">
          <div class="setting-header">
            <p-toggleswitch
              [ngModel]="metadataPersistence.moveFilesToLibraryPattern"
              (onChange)="onPersistenceToggle('moveFilesToLibraryPattern')">
            </p-toggleswitch>
            <label class="setting-label">{{ t('autoMove') }}</label>
          </div>
          <p class="setting-description">{{ t('autoMoveDesc') }}</p>
        </div>
      }
    </div>

    <div class="section-header sidecar-section-header">
      <h3 class="section-title">
        <i class="pi pi-file"></i>
        {{ t('sidecarTitle') }}
      </h3>
      <p class="section-description">
        {{ t('sidecarDesc') }}
      </p>
    </div>

    <div class="section-body" [class.network-disabled]="isNetworkStorage">
      <div class="setting-item">
        <div class="setting-header">
          <p-toggleswitch
            [ngModel]="metadataPersistence.sidecarSettings?.enabled"
            (onChange)="onSidecarToggle('enabled')"
            [disabled]="isNetworkStorage">
          </p-toggleswitch>
          <label class="setting-label">{{ t('enableSidecar') }}</label>
        </div>
        <p class="setting-description" [innerHTML]="t('enableSidecarDesc')"></p>
      </div>

      @if (metadataPersistence.sidecarSettings?.enabled) {
        <div class="setting-item nested-setting">
          <div class="setting-header">
            <p-toggleswitch
              [ngModel]="metadataPersistence.sidecarSettings?.writeOnUpdate"
              (onChange)="onSidecarToggle('writeOnUpdate')"
              [disabled]="isNetworkStorage">
            </p-toggleswitch>
            <label class="setting-label">{{ t('writeOnUpdate') }}</label>
          </div>
          <p class="setting-description">{{ t('writeOnUpdateDesc') }}</p>
        </div>

        <div class="setting-item nested-setting">
          <div class="setting-header">
            <p-toggleswitch
              [ngModel]="metadataPersistence.sidecarSettings?.writeOnScan"
              (onChange)="onSidecarToggle('writeOnScan')"
              [disabled]="isNetworkStorage">
            </p-toggleswitch>
            <label class="setting-label">{{ t('writeOnScan') }}</label>
          </div>
          <p class="setting-description">{{ t('writeOnScanDesc') }}</p>
        </div>

        <div class="setting-item nested-setting">
          <div class="setting-header">
            <p-toggleswitch
              [ngModel]="metadataPersistence.sidecarSettings?.includeCoverFile"
              (onChange)="onSidecarToggle('includeCoverFile')"
              [disabled]="isNetworkStorage">
            </p-toggleswitch>
            <label class="setting-label">{{ t('includeCover') }}</label>
          </div>
          <p class="setting-description" [innerHTML]="t('includeCoverDesc')"></p>
        </div>
      }
    </div>
  </div>
</ng-container>
