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

    <app-metadata-persistence-settings-component></app-metadata-persistence-settings-component>
    <div class="section-divider"><hr></div>
    <div class="preferences-section">
      <div class="settings-card">
        <div class="section-header">
          <h3 class="section-title">
            <i class="pi pi-download"></i>
            {{ t('autoDownload.sectionTitle') }}
          </h3>
          <p class="section-description">
            <i class="pi pi-exclamation-triangle"></i>
            <span>{{ t('autoDownload.warning') }}</span>
          </p>
        </div>

        <div class="section-body">
          <div class="setting-item">
            <div class="setting-header">
              <p-toggleswitch
                [(ngModel)]="metadataDownloadOnBookdrop"
                (onChange)="onMetadataDownloadOnBookdropToggle($event.checked)">
              </p-toggleswitch>
              <label class="setting-label">{{ t('autoDownload.enableLabel') }}</label>
            </div>
          </div>
        </div>
      </div>
    </div>
    <app-metadata-provider-settings></app-metadata-provider-settings>
    <div class="section-divider"><hr></div>
    <app-metadata-provider-field-selector></app-metadata-provider-field-selector>
    <div class="section-divider"><hr></div>
    <app-public-reviews-settings-component></app-public-reviews-settings-component>
    <div class="section-divider"><hr></div>
    <app-metadata-match-weights-component></app-metadata-match-weights-component>
  </div>
</ng-container>
