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

<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: selection.length } }}
        </span>
        <pa-button
          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 (bulkAction.inProgress) {
          <div class="body-m">
            {{ bulkAction.label | translate }}
            {{ bulkAction.done }} / {{ bulkAction.total }}
          </div>
        }
      </div>
    }
  </div>
  @if (
    allResourcesSelected ||
    ((allSelected | async) === true && !bulkAction.inProgress && ((totalCount | async) || 0) > selection.length)
  ) {
    <div class="selection-bar">
      <div class="title-xxs">
        @if (allResourcesSelected) {
          {{ 'resource.select.kb-resources-selected' | translate: { num: totalCount | 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">
          {{ 'resource.select.select-kb-resources' | translate: { num: totalCount | 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
            [value]="allSelected | async"
            [paTooltip]="((allSelected | async) === true ? 'generic.deselect_all' : 'generic.select_all') | translate"
            [disabled]="bulkAction.inProgress"
            (change)="toggleAll()"></pa-checkbox>
        </pa-table-cell>
      }
    </pa-table-sortable-header>

    @for (row of data | async; track row.resource.id) {
      <pa-table-row>
        @if (isAdminOrContrib | async) {
          <pa-table-cell>
            <pa-checkbox
              [value]="selection.includes(row.resource.id)"
              (change)="toggleSelection(row.resource.id)"></pa-checkbox>
          </pa-table-cell>
        }

        <pa-table-cell
          clickable
          (click)="onClickTitle(row.resource)">
          <stf-title-cell [row]="row"></stf-title-cell>
        </pa-table-cell>

        <pa-table-cell center>
          <span class="body-s">{{ row.resource.created | date: 'mediumDate' }}</span>
        </pa-table-cell>
        <pa-table-cell>
          <div class="body-s errors-cell">
            @if (row.errors) {
              @if (row.errors.length > 120) {
                <div [paPopover]="error">{{ row.errors.substring(0, 120) }}…</div>
                <pa-popover #error>
                  {{ row.errors }}
                </pa-popover>
              } @else {
                {{ row.errors }}
              }
            }
          </div>
        </pa-table-cell>
        @if (isAdminOrContrib | async) {
          <pa-table-cell-menu>
            <pa-button
              icon="more-vertical"
              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, 'reprocess')">
                {{ 'resource.reprocess' | 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 ((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>