<div class="resource-list page-spacing">
  @if ((loading | async) === true) {
    <div class="resource-list-skeleton">
      <div class="skeleton-filters">
        @for (_ of [1, 2, 3, 4, 5]; track $index) {
          <nsi-skeleton
            width="150px"
            height="2.25rem"
            borderRadius="small"></nsi-skeleton>
        }
      </div>
      <div class="skeleton-table-header">
        <nsi-skeleton
          width="100%"
          height="2.5rem"
          borderRadius="small"></nsi-skeleton>
      </div>
      <div class="skeleton-table-rows">
        @for (_ of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; track $index) {
          <div class="skeleton-row">
            <nsi-skeleton
              width="40px"
              height="1rem"
              borderRadius="small"></nsi-skeleton>
            <nsi-skeleton
              width="40%"
              height="1rem"
              borderRadius="small"></nsi-skeleton>
            <nsi-skeleton
              width="150px"
              height="1rem"
              borderRadius="small"></nsi-skeleton>
            <nsi-skeleton
              width="80px"
              height="1rem"
              borderRadius="small"></nsi-skeleton>
            <nsi-skeleton
              width="80px"
              height="1rem"
              borderRadius="small"></nsi-skeleton>
            <nsi-skeleton
              width="60px"
              height="1rem"
              borderRadius="small"></nsi-skeleton>
          </div>
        }
      </div>
      <div class="skeleton-pagination">
        <nsi-skeleton
          width="300px"
          height="2rem"
          borderRadius="small"></nsi-skeleton>
      </div>
    </div>
  } @else if ((emptyKb | async) === true) {
    @if (uploadInProgress | async) {
      <nsi-spinner></nsi-spinner>
    } @else {
      <div
        class="empty-kb"
        data-cy="empty-kb">
        <div class="title-m">{{ 'resource.empty.title' | translate }}</div>
        <div class="body-m">{{ 'resource.empty.description' | translate }}</div>
        @if (isAdminOrContrib | async) {
          <div>
            <stf-upload-button></stf-upload-button>
          </div>
        }
      </div>
    }
  } @else if ((emptyKb | async) === false) {
    <div
      class="resource-list-header"
      #header>
      <div class="filters-container">
        <div class="filters">
          <div>
            <nsi-dropdown-button
              freeWidth
              aspect="basic"
              [disabled]="filterOptions.mainTypes.length === 0"
              [popupRef]="mainTypeFilters">
              {{ 'resource.filter.resource-type' | translate }}
              {{ selectedMainTypeOptions.length ? '(' + selectedMainTypeOptions.length + ')' : '' }}
            </nsi-dropdown-button>
            <pa-dropdown #mainTypeFilters>
              @for (option of filterOptions.mainTypes; track option.id) {
                <pa-option
                  (selectOption)="onSelectFilter(option, $event)"
                  [paTooltip]="option.help"
                  dontCloseOnSelect>
                  <pa-checkbox
                    [(value)]="option.selected"
                    (valueChange)="onToggleFilter()">
                    {{ option.label }}
                  </pa-checkbox>
                </pa-option>
              }
            </pa-dropdown>
          </div>
          <div class="label-filters">
            <app-label-dropdown
              [labelSets]="displayedLabelSets"
              [selection]="selectedClassifications"
              (selectionChange)="updateClassifications($event)"
              [disabled]="filterOptions.classification.length === 0"
              [fullWidth]="true"
              [multiple]="true"
              aspect="basic">
              {{ 'resource.classification-column' | translate }}
              {{ selectedClassifications.length ? '(' + selectedClassifications.length + ')' : '' }}
            </app-label-dropdown>
            @if (selectedClassificationOptions.length > 1) {
              <div class="labels-logic">
                <pa-toggle
                  labelOnRight
                  [value]="andLogicForLabels"
                  (valueChange)="updateLabelsLogic($event)"
                  [paPopover]="labelsLogic">
                  {{ andLogicForLabels ? 'AND' : 'OR' }}
                </pa-toggle>
                <pa-popover #labelsLogic>
                  {{ (andLogicForLabels ? 'resource.filter.and' : 'resource.filter.or') | translate }}
                </pa-popover>
              </div>
            }
          </div>

          <div>
            <nsi-dropdown-button
              freeWidth
              aspect="basic"
              [disabled]="isPendingView || isErrorView"
              [popupRef]="dateFilters">
              {{ 'resource.filter.date-added' | translate }}
              {{ selectedDates.length ? '(' + selectedDates.length + ')' : '' }}
            </nsi-dropdown-button>
            <pa-dropdown #dateFilters>
              <div class="date-filters">
                @if (dateFilters.isDisplayed) {
                  <!-- TODO: remove above condition once date pickers can be reset programmatically -->
                  <form
                    [formGroup]="dateForm"
                    (ngSubmit)="applyDates()">
                    <pa-date-picker
                      formControlName="start"
                      [label]="'resource.filter.from' | translate"
                      isInPopup></pa-date-picker>
                    <pa-date-picker
                      formControlName="end"
                      [label]="'resource.filter.until' | translate"
                      isInPopup></pa-date-picker>
                    <div class="date-filters-buttons">
                      <pa-button
                        class="full-width"
                        aspect="basic"
                        (click)="dateFilters.close()">
                        {{ 'generic.cancel' | translate }}
                      </pa-button>
                      <pa-button
                        type="submit"
                        class="full-width">
                        {{ 'resource.filter.apply' | translate }}
                      </pa-button>
                    </div>
                  </form>
                }
              </div>
            </pa-dropdown>
          </div>

          @if (hiddenResourcesEnabled | async) {
            <div>
              <nsi-dropdown-button
                freeWidth
                aspect="basic"
                [popupRef]="visibilityFilters">
                {{ 'resource.visibility' | translate }}
                {{ filterOptions.hidden !== undefined ? '(1)' : '' }}
              </nsi-dropdown-button>
              <pa-dropdown #visibilityFilters>
                <pa-option dontCloseOnSelect>
                  <pa-checkbox
                    [value]="filterOptions.hidden === true"
                    (change)="onHiddenChange(true)">
                    {{ 'resource.hidden' | translate }}
                  </pa-checkbox>
                </pa-option>
                <pa-option dontCloseOnSelect>
                  <pa-checkbox
                    [value]="filterOptions.hidden === false"
                    (change)="onHiddenChange(false)">
                    {{ 'resource.non-hidden' | translate }}
                  </pa-checkbox>
                </pa-option>
              </pa-dropdown>
            </div>
          }

          @if (isMainView || isProcessedView) {
            <nsi-search-input
              icon="search"
              [modes]="searchModes"
              [value]="query | async"
              (modeSelected)="onModeChange($event)"
              (valueChange)="onQueryChange($event)"
              (keyup.enter)="search()">
              {{ 'stash.search' | translate }}
            </nsi-search-input>
          }
        </div>

        @if (isAdminOrContrib | async) {
          <stf-upload-button></stf-upload-button>
        }
      </div>

      <div class="active-filters">
        @if (!isMainView || ((statusCount | async)?.pending || 0) + ((statusCount | async)?.error || 0) > 0) {
          @if ((statusCount | async)?.processed || 0 > 0) {
            <pa-chip-selectionable
              [selected]="isProcessedView"
              (select)="goToView(isProcessedView ? '' : 'processed')"
              [icon]="{ name: 'circle-check' }"
              [backgroundColor]="isProcessedView ? '#EDEBFD' : undefined">
              {{ 'resource.processed' | translate }} ({{ (statusCount | async)?.processed }})
            </pa-chip-selectionable>
          }
          @if ((statusCount | async)?.pending || 0 > 0) {
            <pa-chip-selectionable
              [selected]="isPendingView"
              (select)="goToView(isPendingView ? '' : 'pending')"
              [icon]="{ name: 'clock-dash' }"
              [backgroundColor]="isPendingView ? '#EDEBFD' : undefined">
              {{ 'resource.processing' | translate }} ({{ (statusCount | async)?.pending }})
            </pa-chip-selectionable>
          }
          @if ((statusCount | async)?.error || 0 > 0) {
            <pa-chip-selectionable
              [selected]="isErrorView"
              (select)="goToView(isErrorView ? '' : 'error')"
              [icon]="{ name: 'warning' }"
              [backgroundColor]="isErrorView ? '#EDEBFD' : undefined">
              {{ 'resource.errors' | translate }} ({{ (statusCount | async)?.error }})
            </pa-chip-selectionable>
          }
        }
        @if (isFiltering | async) {
          <div class="filtered-by title-xxs">{{ 'resource.filtered-by' | translate }}</div>
        }
        @for (option of selectedClassificationOptions; track option.value) {
          <pa-chip-closeable (closed)="clearFilter(option)">{{ option.label }}</pa-chip-closeable>
        }
        @for (option of selectedMainTypeOptions; track option.value) {
          <pa-chip-closeable (closed)="clearFilter(option)">{{ option.label }}</pa-chip-closeable>
        }
        @if (filterOptions.creation.start) {
          <pa-chip-closeable (closed)="clearDate('start')">
            {{ 'resource.filter.from' | translate }}:
            <span>{{ filterOptions.creation.start.date | date: 'mediumDate' }}</span>
          </pa-chip-closeable>
        }
        @if (filterOptions.creation.end) {
          <pa-chip-closeable (closed)="clearDate('end')">
            {{ 'resource.filter.until' | translate }}:
            <span>{{ filterOptions.creation.end.date | date: 'mediumDate' }}</span>
          </pa-chip-closeable>
        }
        @if (filterOptions.hidden === true) {
          <pa-chip-closeable (closed)="clearHidden()">{{ 'resource.hidden' | translate }}</pa-chip-closeable>
        }
        @if (filterOptions.hidden === false) {
          <pa-chip-closeable (closed)="clearHidden()">{{ 'resource.non-hidden' | translate }}</pa-chip-closeable>
        }
        @if (showClearButton | async) {
          <pa-button
            size="small"
            aspect="basic"
            (click)="clearFilters()">
            {{ 'resource.filter.clear' | translate }}
          </pa-button>
        }
      </div>
    </div>

    <div class="resource-list-content">
      @if (isMainView) {
        <stf-resources-table></stf-resources-table>
      } @else if (isProcessedView) {
        <stf-processed-resources-table></stf-processed-resources-table>
      } @else if (isPendingView) {
        <stf-pending-resources-table></stf-pending-resources-table>
      } @else if (isErrorView) {
        <stf-error-resources-table></stf-error-resources-table>
      }
    </div>
  }
</div>
