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

    <div class="section-body">
      <div class="setting-item">
        <div class="setting-header-standalone">
          <label class="setting-label">{{ t('defaultPreferences') }}</label>
        </div>
        <p class="setting-description">{{ t('defaultPreferencesDesc') }}</p>
        <div class="setting-options">
          <div class="select-group">
            <p-select size="small" [options]="viewModeOptions" [(ngModel)]="selectedView"
                      optionLabel="label" optionValue="value"
                      [placeholder]="t('tableViewMode')" appendTo="body"></p-select>
          </div>
        </div>

        <div class="multi-sort-editor">
          <label class="multi-sort-label">{{ t('sortOrderLabel') }}</label>
          <app-multi-sort-popover
            [sortCriteria]="globalSortAsOptions"
            [availableSortOptions]="allSortAsOptions"
            (criteriaChange)="onGlobalSortCriteriaChange($event)">
          </app-multi-sort-popover>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-header-standalone">
          <label class="setting-label">{{ t('visibleSortFields') }}</label>
        </div>
        <p class="setting-description">
          {{ t('visibleSortFieldsDesc') }}
          <span class="sort-field-count">({{ sortFieldSelectionCountText }})</span>
        </p>
        <div class="sort-field-order-editor">
          <div
            #sortFieldList
            class="sort-field-order-list"
            cdkDropList
            [cdkDropListData]="visibleSortFields"
            (cdkDropListDropped)="onSortFieldDrop($event)">
            @for (f of visibleSortFields; track f; let i = $index) {
              <div class="sort-field-order-row" cdkDrag>
                <div class="sort-field-drag-handle" cdkDragHandle>
                  <i class="pi pi-bars"></i>
                </div>
                <span class="sort-field-rank">{{ i + 1 }}.</span>
                <span class="sort-field-label">{{ getSortFieldLabel(f) }}</span>
                <button
                  type="button"
                  class="remove-sort-field-btn"
                  (click)="removeSortField(i)"
                  [disabled]="visibleSortFields.length <= minSortFields"
                  [pTooltip]="t('remove')"
                  tooltipPosition="top">
                  <i class="pi pi-times"></i>
                </button>
              </div>
            }
          </div>
          <div class="sort-field-actions-row">
            @if (availableSortFieldsToAdd.length > 0 && visibleSortFields.length < maxSortFields) {
              <p-select
                size="small"
                [options]="availableSortFieldsToAdd"
                [(ngModel)]="selectedAddSortField"
                optionLabel="label"
                optionValue="value"
                [placeholder]="t('addSortField')"
                [style]="{ width: '200px' }"
                appendTo="body"
                (onChange)="addSortField()">
              </p-select>
            }
            <button
              type="button"
              class="reset-sort-fields-btn"
              (click)="resetSortFieldsToDefaults()"
              [pTooltip]="t('resetToDefaults')"
              tooltipPosition="top">
              <i class="pi pi-refresh"></i>
            </button>
          </div>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-header">
          <p-toggleswitch [(ngModel)]="autoSaveMetadata"></p-toggleswitch>
          <label class="setting-label">{{ t('autoSave') }}</label>
        </div>
        <p class="setting-description">{{ t('autoSaveDesc') }}</p>
      </div>

      <div class="setting-item">
        <div class="setting-header-standalone">
          <label class="setting-label">{{ t('overrideManagement') }}</label>
        </div>
        <p class="setting-description">{{ t('overrideManagementDesc') }}</p>
        <div class="setting-options">
          <p-button [label]="t('addOverride')" outlined size="small" (onClick)="addOverride()" icon="pi pi-plus" [disabled]="availableLibraries.length === 0"></p-button>
        </div>
      </div>

      @if (overrides.length > 0) {
        <div class="overrides-table">
          <p-table [value]="overrides" [tableStyle]="{'width': '100%'}">
            <ng-template pTemplate="header">
              <tr>
                <th style="min-width: 150px; max-width: 220px;">{{ t('tableType') }}</th>
                <th style="min-width: 220px; max-width: 280px;">{{ t('tableName') }}</th>
                <th style="min-width: 160px;">{{ t('tableSortConfig') }}</th>
                <th style="min-width: 125px;">{{ t('tableViewMode') }}</th>
                <th style="width: 75px; text-align: center;">{{ t('tableActions') }}</th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-override let-rowIndex="rowIndex">
              <tr>
                <td>
                  <p-select size="small" [options]="entityTypeOptions" [(ngModel)]="override.entityType"
                            optionLabel="label" optionValue="value"
                            [style]="{'width': '100%'}" appendTo="body"></p-select>
                </td>
                <td>
                  @if (override.entityType) {
                    <p-select size="small"
                              [options]="getAvailableEntities(rowIndex, override.entityType)"
                              [(ngModel)]="override.library"
                              optionLabel="label" optionValue="value"
                              [style]="{'width': '100%'}" appendTo="body"></p-select>
                  }
                </td>
                <td>
                  <p-button
                    [label]="t('editSort')"
                    icon="pi pi-sort"
                    size="small"
                    [outlined]="true"
                    (onClick)="overrideSortPop.toggle($event)">
                  </p-button>
                  <p-popover #overrideSortPop [dismissable]="true" appendTo="body">
                    <app-multi-sort-popover
                      [sortCriteria]="override.sortCriteriaAsOptions"
                      [availableSortOptions]="allSortAsOptions"
                      (criteriaChange)="onOverrideSortCriteriaChange(rowIndex, $event)">
                    </app-multi-sort-popover>
                  </p-popover>
                </td>
                <td>
                  <p-select size="small" [options]="viewModeOptions" [(ngModel)]="override.view"
                            optionLabel="label" optionValue="value"
                            [style]="{'width': '100%'}" appendTo="body"></p-select>
                </td>
                <td style="text-align: center;">
                  <p-button icon="pi pi-trash" severity="danger" size="small" [outlined]="true"
                            (onClick)="removeOverride(rowIndex)" [pTooltip]="t('removeOverride')" tooltipPosition="left"></p-button>
                </td>
              </tr>
            </ng-template>
          </p-table>
        </div>
      }

      <div class="setting-actions">
        <p-button [label]="t('saveSettings')" icon="pi pi-save" outlined severity="success" (onClick)="saveSettings()"></p-button>
      </div>
    </div>
  </div>
</ng-container>
