<ng-container *transloco="let t; prefix: 'settingsView.filter'">
  <div class="settings-card">
    <div class="section-header">
      <h3 class="section-title">
        <i class="pi pi-filter"></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('filterMode') }}</label>
        </div>
        <p class="setting-description">{{ t('filterModeDesc') }}</p>
        <div class="setting-options">
          <p-select
            size="small"
            [options]="filterModes"
            [(ngModel)]="selectedFilterMode"
            (ngModelChange)="onFilterModeChange()"
            appendTo="body">
          </p-select>
        </div>
      </div>

      <div class="setting-item">
        <div class="setting-header-standalone">
          <label class="setting-label">{{ t('visibleFilters') }}</label>
        </div>
        <p class="setting-description">
          {{ t('visibleFiltersDesc', {min: minFilters, max: maxFilters}) }}
          <span class="filter-count">({{ selectionCountText }})</span>
        </p>
        <div class="filter-order-editor">
          <div
            #filterList
            class="filter-order-list"
            cdkDropList
            [cdkDropListData]="selectedVisibleFilters"
            (cdkDropListDropped)="onDrop($event)">
            @for (f of selectedVisibleFilters; track f; let i = $index) {
              <div class="filter-order-row" cdkDrag>
                <div class="filter-drag-handle" cdkDragHandle>
                  <i class="pi pi-bars"></i>
                </div>
                <span class="filter-rank">{{ i + 1 }}.</span>
                <span class="filter-label">{{ getFilterLabel(f) }}</span>
                <button
                  type="button"
                  class="remove-filter-btn"
                  (click)="removeFilter(i)"
                  [disabled]="selectedVisibleFilters.length <= minFilters"
                  [pTooltip]="'common.remove' | transloco"
                  tooltipPosition="top">
                  <i class="pi pi-times"></i>
                </button>
              </div>
            }
          </div>
          <div class="filter-actions-row">
            @if (availableFilters.length > 0 && selectedVisibleFilters.length < maxFilters) {
              <p-select
                size="small"
                [options]="availableFilters"
                [(ngModel)]="selectedAddFilter"
                optionLabel="label"
                optionValue="value"
                [placeholder]="t('addFilter')"
                [style]="{ width: '200px' }"
                appendTo="body"
                (onChange)="addFilter()">
              </p-select>
            }
            <button
              type="button"
              class="reset-btn"
              (click)="resetToDefaults()"
              [pTooltip]="t('resetToDefaults')"
              tooltipPosition="top">
              <i class="pi pi-refresh"></i>
            </button>
          </div>
        </div>
      </div>

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