@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">
          @if (isSummarizationAuthorized | async) {
            <pa-button
              aspect="basic"
              size="small"
              [disabled]="allResourcesSelected"
              (click)="bulkSummarize()">
              {{ 'resource.menu.summarize' | translate }}
            </pa-button>
          }
          <pa-button
            aspect="basic"
            size="small"
            [disabled]="bulkAction.inProgress"
            (click)="bulkReprocess()">
            {{ 'resource.reprocess' | translate }}
          </pa-button>
          <pa-button
            data-cy="delete-selection"
            kind="destructive"
            aspect="basic"
            size="small"
            [disabled]="bulkAction.inProgress"
            (click)="bulkDelete()">
            {{ 'generic.delete' | 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 (hiddenResourcesEnabled | async) {
            <div>
              <nsi-dropdown-button
                size="small"
                aspect="basic"
                [popupRef]="visibilityActions"
                freeWidth>
                {{ 'resource.change-visibility' | translate }}
              </nsi-dropdown-button>
              <pa-dropdown
                #visibilityActions
                dontAdjustPosition>
                <pa-option (selectOption)="bulkChangeVisibility(true)">{{ 'resource.hide' | translate }}</pa-option>
                <pa-option (selectOption)="bulkChangeVisibility(false)">{{ 'resource.unhide' | translate }}</pa-option>
              </pa-dropdown>
            </div>
          }

          <span class="selected-count title-xxs">
            {{
              'resource.selected_count'
                | translate: { num: allResourcesSelected ? (totalItems | async) : selection.length }
            }}
          </span>
        </div>
      }

      <div class="table-options">
        @if (visibleColumnsId | async; as visibleColumns) {
          @if (visibleColumns.includes('classification')) {
            <nsi-button-mini (click)="fullLabels = !fullLabels">
              {{ (fullLabels ? 'resource.collapse-labels' : 'resource.expand-labels') | translate }}
            </nsi-button-mini>
          }
          @if (visibleColumns.includes('key-value-fields')) {
            <nsi-button-mini (click)="fullKeyValue = !fullKeyValue">
              {{ (fullKeyValue ? 'resource.collapse-key-value' : 'resource.expand-key-value') | translate }}
            </nsi-button-mini>
          }
        }
        <nsi-button-mini
          data-cy="visible-columns-dropdown"
          [paPopup]="visibleColumns">
          {{ 'resource.visible_columns_dropdown' | translate }}
          <pa-icon
            name="chevron-down"
            size="small"></pa-icon>
        </nsi-button-mini>
        <pa-dropdown
          #visibleColumns
          dontAdjustPosition>
          @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>
  </div>

  <div class="table-card">
    @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"
            kind="secondary"
            size="small"
            (click)="clearSelection()"
            [disabled]="bulkAction.inProgress">
            {{ 'generic.clear-selection' | translate }}
          </pa-button>
        } @else {
          <pa-button
            aspect="basic"
            kind="secondary"
            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 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>
  </div>
}