@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) {
      <div class="resource-bulk-actions">
        <span class="selected-count title-xxs">
          {{ 'resource.selected_count' | translate: { num: 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 (
          (allSelected | async) === true &&
          ((totalCount | async) || 0) > selection.length * 1.5 &&
          !bulkAction.inProgress
        ) {
          <pa-button
            aspect="basic"
            kind="destructive"
            size="small"
            (click)="deleteAllResources()"
            [disabled]="bulkAction.inProgress">
            {{ 'resource.delete-all-pending' | translate: { count: totalCount | async } }}
          </pa-button>
        }
        @if (bulkAction.inProgress) {
          <div class="body-m">
            {{ bulkAction.label | translate }}
            {{ bulkAction.done }} / {{ bulkAction.total }}
          </div>
        }
      </div>
    }
  </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"
            [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 [disabled]="row.resource.metadata?.status === 'DELETED'">
        @if (isAdminOrContrib | async) {
          <pa-table-cell>
            <pa-checkbox
              [disabled]="row.resource.metadata?.status === 'DELETED'"
              [value]="selection.includes(row.resource.id)"
              (change)="toggleSelection(row.resource.id)"></pa-checkbox>
          </pa-table-cell>
        }
        <pa-table-cell
          [clickable]="row.resource.metadata?.status !== 'DELETED'"
          (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>
          <span
            class="body-s"
            [innerHTML]="row.status"></span>
        </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 || row.resource.metadata?.status === 'DELETED'"
              [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>