@if (isLoading) {
  <div
    data-cy="spinner"
    class="loading-shade">
    <nsi-spinner></nsi-spinner>
  </div>
}

@if ((isReady | async) === true) {
  <div class="resource-table-header">
    <div class="header-container">
      @if ((isAdminOrContrib | async) && (selection.length > 0 || allResourcesSelected)) {
        <div class="resource-bulk-actions">
          <span class="selected-count title-xxs">
            {{
              'resource.selected_count'
                | translate: { num: allResourcesSelected ? (totalItems | async) : selection.length }
            }}
          </span>

          <pa-button
            data-cy="delete-selection"
            kind="destructive"
            aspect="basic"
            size="small"
            [disabled]="bulkAction.inProgress"
            (click)="bulkDelete()">
            {{ 'generic.delete' | translate }}
          </pa-button>
          <pa-button
            aspect="basic"
            size="small"
            [disabled]="bulkAction.inProgress"
            (click)="bulkReprocess()">
            {{ 'resource.reprocess' | translate }}
          </pa-button>
          @if (hasLabelSets | async) {
            <app-label-dropdown
              [labelSets]="labelSets | async"
              (selectionChange)="updateAddLabelList($event)"
              (dropdownClose)="addLabelsToSelection()"
              displayRadioForNonMultiple
              aspect="basic"
              size="small">
              {{ 'resource.labels.add' | translate }}
            </app-label-dropdown>
            <app-label-dropdown
              [labelSets]="labelSets | async"
              (selectionChange)="updateRemoveLabelList($event)"
              (dropdownClose)="removeLabelsToSelection()"
              multiple
              aspect="basic"
              size="small">
              {{ 'resource.labels.remove' | translate }}
            </app-label-dropdown>
          }
          @if (isSummarizationAuthorized | async) {
            <pa-button
              aspect="basic"
              size="small"
              [disabled]="allResourcesSelected"
              (click)="bulkSummarize()">
              {{ 'resource.menu.summarize' | translate }}
            </pa-button>
          }
          @if (hiddenResourcesEnabled | async) {
            <div>
              <nsi-dropdown-button
                size="small"
                aspect="basic"
                [popupRef]="visibilityActions"
                freeWidth>
                {{ 'resource.change-visibility' | translate }}
              </nsi-dropdown-button>
              <pa-dropdown #visibilityActions>
                <pa-option (selectOption)="bulkChangeVisibility(true)">{{ 'resource.hide' | translate }}</pa-option>
                <pa-option (selectOption)="bulkChangeVisibility(false)">{{ 'resource.unhide' | translate }}</pa-option>
              </pa-dropdown>
            </div>
          }
        </div>
      }

      <div class="table-options">
        @if (visibleColumnsId | async; as visibleColumns) {
          @if (visibleColumns.includes('classification')) {
            <pa-button
              size="small"
              aspect="basic"
              iconAndText
              [icon]="fullLabels ? 'collapse' : 'expand'"
              (click)="fullLabels = !fullLabels">
              {{ (fullLabels ? 'resource.collapse-labels' : 'resource.expand-labels') | translate }}
            </pa-button>
          }
          @if (visibleColumns.includes('key-value-fields')) {
            <pa-button
              size="small"
              aspect="basic"
              iconAndText
              [icon]="fullKeyValue ? 'collapse' : 'expand'"
              (click)="fullKeyValue = !fullKeyValue">
              {{ (fullKeyValue ? 'resource.collapse-key-value' : 'resource.expand-key-value') | translate }}
            </pa-button>
          }
        }
        <nsi-dropdown-button
          size="small"
          aspect="basic"
          data-cy="visible-columns-dropdown"
          [popupRef]="visibleColumns">
          {{ 'resource.visible_columns_dropdown' | translate }}
        </nsi-dropdown-button>
        <pa-dropdown #visibleColumns>
          @for (column of optionalColumns; track column.id) {
            <pa-option
              [value]="column.id"
              (selectOption)="toggleColumn(column, $event)"
              dontCloseOnSelect>
              <pa-checkbox
                [value]="(selectedColumns | async)?.includes(column.id)"
                (valueChange)="toggleColumn(column)">
                {{ column.label | translate }}
              </pa-checkbox>
            </pa-option>
          }
        </pa-dropdown>
      </div>
    </div>
    @if (bulkAction.inProgress) {
      <div class="body-m">
        {{ bulkAction.label | translate }}
        {{ bulkAction.done }} / {{ bulkAction.total }}
      </div>
    }
    @if (
      allResourcesSelected ||
      ((allSelected | async) === true &&
        !bulkAction.inProgress &&
        !status &&
        ((totalItems | async) || 0) > selection.length)
    ) {
      <div class="selection-bar">
        <div class="title-xxs">
          @if (allResourcesSelected) {
            @if (isFiltering | async) {
              {{ 'resource.select.filtered-resources-selected' | translate: { num: totalItems | async } }}
            } @else {
              {{ 'resource.select.kb-resources-selected' | translate: { num: totalItems | async } }}
            }
          } @else {
            {{ 'resource.select.page-resources-selected' | translate: { num: selection.length } }}
          }
        </div>
        @if (allResourcesSelected) {
          <pa-button
            aspect="basic"
            size="small"
            (click)="clearSelection()"
            [disabled]="bulkAction.inProgress">
            {{ 'generic.clear-selection' | translate }}
          </pa-button>
        } @else {
          <pa-button
            aspect="basic"
            size="small"
            (click)="selectAllResources()"
            [disabled]="bulkAction.inProgress">
            @if (isFiltering | async) {
              {{ 'resource.select.select-filtered-resources' | translate: { num: totalItems | async } }}
            } @else {
              {{ 'resource.select.select-kb-resources' | translate: { num: totalItems | async } }}
            }
          </pa-button>
        }
      </div>
    }
  </div>

  <div class="table-container">
    <pa-table [columns]="tableLayout | async">
      <pa-table-sortable-header
        noBackground
        [cells]="headerCells | async"
        (sort)="sortBy($event)">
        @if (isAdminOrContrib | async) {
          <pa-table-cell header>
            <pa-checkbox
              data-cy="select-all"
              [value]="(allSelected | async) || allResourcesSelected"
              [paTooltip]="((allSelected | async) === true ? 'generic.deselect_all' : 'generic.select_all') | translate"
              [disabled]="bulkAction.inProgress || allResourcesSelected"
              (change)="toggleAll()"></pa-checkbox>
          </pa-table-cell>
        }
      </pa-table-sortable-header>

      @if ((tableLoading | async) === true) {
        @for (_ of skeletonRows; track $index) {
          <pa-table-row>
            @if (isAdminOrContrib | async) {
              <pa-table-cell>
                <nsi-skeleton
                  width="16px"
                  height="16px"
                  borderRadius="small"></nsi-skeleton>
              </pa-table-cell>
            }
            <pa-table-cell>
              <nsi-skeleton
                width="60%"
                height="1rem"
                borderRadius="small"></nsi-skeleton>
            </pa-table-cell>
            <pa-table-cell>
              <nsi-skeleton
                width="80px"
                height="1rem"
                borderRadius="small"></nsi-skeleton>
            </pa-table-cell>
            <pa-table-cell>
              <nsi-skeleton
                width="70px"
                height="1rem"
                borderRadius="small"></nsi-skeleton>
            </pa-table-cell>
            <pa-table-cell>
              <nsi-skeleton
                width="70px"
                height="1rem"
                borderRadius="small"></nsi-skeleton>
            </pa-table-cell>
            <pa-table-cell>
              <nsi-skeleton
                width="50px"
                height="1rem"
                borderRadius="small"></nsi-skeleton>
            </pa-table-cell>
          </pa-table-row>
        }
      } @else {
        @for (row of data | async; track row.resource.id) {
          <pa-table-row [class.hidden-resource]="row.resource.hidden">
            @if (isAdminOrContrib | async) {
              <pa-table-cell>
                <pa-checkbox
                  [value]="selection.includes(row.resource.id) || allResourcesSelected"
                  (change)="toggleSelection(row.resource.id)"
                  [disabled]="allResourcesSelected"></pa-checkbox>
              </pa-table-cell>
            }
            <pa-table-cell
              clickable
              (click)="onClickTitle(row.resource)">
              <stf-title-cell [row]="row"></stf-title-cell>
            </pa-table-cell>

            @if (visibleColumnsId | async; as visibleColumns) {
              @if (visibleColumns.includes('classification')) {
                <pa-table-cell class="classification-cell">
                  <div class="row-container">
                    @for (label of row.labels; track label.labelset + label.label) {
                      @if (!fullLabels && label.label.length > 7) {
                        <nsi-label
                          [color]="label.color"
                          [disabled]="deletingLabel"
                          (removeLabel)="onRemoveLabel(row.resource, label, $event)"
                          [paTooltip]="label.label">
                          {{ label.label.substring(0, 7) }}…
                        </nsi-label>
                      } @else {
                        <nsi-label
                          [color]="label.color"
                          [disabled]="deletingLabel"
                          (removeLabel)="onRemoveLabel(row.resource, label, $event)">
                          {{ label.label }}
                        </nsi-label>
                      }
                    }
                  </div>
                </pa-table-cell>
              }
              @if (visibleColumns.includes('created')) {
                <pa-table-cell center>
                  <span class="body-s">{{ row.resource.created + 'Z' | date: 'mediumDate' }}</span>
                </pa-table-cell>
              }
              @if (visibleColumns.includes('modified')) {
                <pa-table-cell center>
                  <span class="body-s">
                    {{ (row.resource.modified || row.resource.created) + 'Z' | date: 'mediumDate' }}
                  </span>
                </pa-table-cell>
              }
              @if (visibleColumns.includes('language')) {
                <pa-table-cell center>
                  <span class="body-s">{{ row.resource.metadata?.language || '–' }}</span>
                </pa-table-cell>
              }
              @if (visibleColumns.includes('visibility')) {
                <pa-table-cell center>
                  @if (row.resource.hidden) {
                    <pa-icon
                      class="hidden"
                      name="eye-closed"
                      size="small"
                      paTooltip="resource.hidden"></pa-icon>
                  }
                </pa-table-cell>
              }
              @if (visibleColumns.includes('key-value-fields')) {
                <pa-table-cell>
                  @let fields = row.keyValue || {} | keyvalue;
                  @if (fields.length > 0) {
                    <div [class.ellipsis]="!fullKeyValue">
                      @for (field of fields; track field.key) {
                        <div
                          class="body-s"
                          [class.ellipsis]="!fullKeyValue">
                          @if (fields.length > 1) {
                            <span class="field-key">{{ field.key }}:</span>
                          }
                          @for (pair of field.value.value?.data || {} | keyvalue; track pair.key; let last = $last) {
                            @let value = formatKeyValue(pair.value);
                            <span [class.own-line]="fullKeyValue">
                              <strong>{{ pair.key }}</strong>
                              @if (!fullKeyValue && value.length > 12) {
                                <span>: {{ value | slice: 0 : 12 }}…</span>
                              } @else {
                                <span>: {{ value }}</span>
                              }
                            </span>
                            @if (!last && !fullKeyValue) {
                              <span>&nbsp;·&nbsp;</span>
                            }
                          }
                        </div>
                      }
                    </div>
                  } @else {
                    -
                  }
                </pa-table-cell>
              }
            }
            @if (isAdminOrContrib | async) {
              <pa-table-cell-menu>
                <pa-button
                  icon="more-vertical"
                  data-cy="menu-button"
                  aspect="basic"
                  size="small"
                  paTooltip="generic.actions"
                  [disabled]="bulkAction.inProgress"
                  [paPopup]="menu">
                  {{ 'generic.actions' | translate }}
                </pa-button>
                <pa-dropdown #menu>
                  <pa-option (selectOption)="triggerAction(row.resource, 'edit')">
                    {{ 'resource.menu.edit' | translate }}
                  </pa-option>
                  <pa-option (selectOption)="triggerAction(row.resource, 'classify')">
                    {{ 'resource.menu.classify' | translate }}
                  </pa-option>
                  <pa-option (selectOption)="triggerAction(row.resource, 'memory')">
                    {{ 'resource.menu.memory' | translate }}
                  </pa-option>
                  <pa-option
                    [disabled]="(isSummarizationAuthorized | async) === false"
                    [icon]="(isSummarizationAuthorized | async) === false ? unauthorizedIcon : null"
                    iconOnRight
                    (selectOption)="triggerAction(row.resource, 'summarize')">
                    {{ 'resource.menu.summarize' | translate }}
                  </pa-option>
                  <pa-option (selectOption)="triggerAction(row.resource, 'reprocess')">
                    {{ 'resource.reprocess' | translate }}
                  </pa-option>
                  @if (hiddenResourcesEnabled | async) {
                    <pa-option (selectOption)="triggerAction(row.resource, row.resource.hidden ? 'unhide' : 'hide')">
                      {{ (row.resource.hidden ? 'resource.unhide' : 'resource.hide') | translate }}
                    </pa-option>
                  }
                  <pa-separator></pa-separator>
                  <pa-option
                    destructive
                    (selectOption)="triggerAction(row.resource, 'delete')">
                    {{ 'generic.delete' | translate }}
                  </pa-option>
                </pa-dropdown>
              </pa-table-cell-menu>
            }
          </pa-table-row>
        }
      }
    </pa-table>
    @if ((tableLoading | async) !== true && (data | async)?.length === 0) {
      <div class="no-results body-m">{{ 'resource.no-results' | translate }}</div>
    }
  </div>
  <nsi-sticky-footer>
    <stf-table-pagination
      [totalItems]="totalItems | async"
      [totalKbResources]="totalKbResources | async"
      [page]="page | async"
      [totalPages]="totalPages | async"
      (pageChange)="loadPage($event)"
      [pageSize]="pageSize | async"
      [pageSizes]="pageSizes"
      (pageSizeChange)="onPageSizeChange($event)"></stf-table-pagination>
  </nsi-sticky-footer>
}