<ng-container *transloco="let t; prefix: 'settingsLibMeta'">
<div class="main-container">
  <div class="settings-header">
    <h2 class="settings-title">
      <i class="pi pi-database"></i>
      {{ t('title') }}
      <app-external-doc-link docType="fetchConfig"></app-external-doc-link>
    </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-globe"></i>
          {{ t('defaultSettings.sectionTitle') }}
        </h3>
        <p class="section-description">
          {{ t('defaultSettings.sectionDesc') }}
        </p>
      </div>

      <div class="settings-card">
        <app-metadata-advanced-fetch-options
          [currentMetadataOptions]="defaultMetadataOptions"
          [submitButtonLabel]="t('defaultSettings.saveButton')"
          (metadataOptionsSubmitted)="onDefaultMetadataOptionsSubmitted($event)">
        </app-metadata-advanced-fetch-options>
      </div>
    </div>

    <div class="preferences-section">
      <div class="section-header">
        <h3 class="section-title">
          <i class="pi pi-book"></i>
          {{ t('libraryOverrides.sectionTitle') }}
        </h3>
        <p class="section-description">
          {{ t('libraryOverrides.sectionDesc') }}
        </p>
      </div>

      <div class="settings-card">
        @if (libraries$ | async; as libraries) {
          <p-accordion [value]="activePanel" (valueChange)="onPanelChange($event)">
            @for (library of libraries; track trackByLibrary($index, library); let i = $index) {
              <p-accordion-panel [value]="i">
                <p-accordion-header>
                  <div class="accordion-header-content">
                    <div class="library-info">
                      <i [class]="'pi pi-' + library.icon" class="library-icon"></i>
                      <span class="library-name">{{ library.name }}</span>
                      <span class="dot-separator">•</span>
                      @if (hasLibraryOverride(library.id!)) {
                        <span class="override-indicator custom">
                          <i class="pi pi-check-circle"></i>
                          {{ t('libraryOverrides.customSettings') }}
                        </span>
                      } @else {
                        <span class="default-indicator default">
                          <i class="pi pi-globe"></i>
                          {{ t('libraryOverrides.defaultSettings') }}
                        </span>
                      }
                    </div>
                    @if (isLocalStorage) {
                      <div class="sidecar-actions">
                        <p-button
                          icon="pi pi-upload"
                          [label]="t('libraryOverrides.exportSidecar')"
                          size="small"
                          severity="secondary"
                          [outlined]="true"
                          [loading]="isSidecarExporting(library.id!)"
                          (onClick)="exportSidecarForLibrary(library.id!, $event)"
                          [pTooltip]="t('libraryOverrides.exportTooltip')"
                          tooltipPosition="top"
                        />
                        <p-button
                          icon="pi pi-download"
                          [label]="t('libraryOverrides.importSidecar')"
                          size="small"
                          severity="secondary"
                          [outlined]="true"
                          [loading]="isSidecarImporting(library.id!)"
                          (onClick)="importSidecarForLibrary(library.id!, $event)"
                          [pTooltip]="t('libraryOverrides.importTooltip')"
                          tooltipPosition="top"
                        />
                      </div>
                    }
                  </div>
                </p-accordion-header>
                <p-accordion-content>
                  <div class="accordion-content-wrapper">
                    @if (activePanel === i) {
                      <app-metadata-advanced-fetch-options
                        [currentMetadataOptions]="getLibraryOptions(library.id!)"
                        [submitButtonLabel]="t('libraryOverrides.saveLibraryButton', {name: library.name})"
                        (metadataOptionsSubmitted)="onLibraryMetadataOptionsSubmitted(library.id!, $event)">
                      </app-metadata-advanced-fetch-options>
                    }
                  </div>
                </p-accordion-content>
              </p-accordion-panel>
            }
          </p-accordion>
        }
      </div>
    </div>
  </div>
</div>
</ng-container>
