<div class="employees-list">
  <msfa-loader *ngIf="employeesLoading" type="absolute"></msfa-loader>
  <digi-table af-variation="secondary">
    <table>
      <thead>
        <tr>
          <th scope="col" class="employees-list__column-head" *ngFor="let column of columnHeaders">
            {{column.label}}
            <!-- <button
              class="employees-list__sort-button"
              [attr.id]="'sort-button-' + column.key"
              (click)="handleSort(column.key)"
            >
              {{column.label}}
              <ng-container *ngIf="sort.key === column.key">
                <digi-icon-caret-up
                  class="employees-list__sort-icon"
                  *ngIf="sort.order === orderType.ASC"
                ></digi-icon-caret-up>
                <digi-icon-caret-down
                  class="employees-list__sort-icon"
                  *ngIf="sort.order === orderType.DESC"
                ></digi-icon-caret-down>
              </ng-container>
            </button> -->
          </th>
          <!-- <th scope="col" class="employees-list__column-head">Ta bort</th> -->
        </tr>
      </thead>
      <tbody>
        <tr class="employees-list__row" *ngFor="let employee of employees">
          <th class="employees-list__cell employees-list__cell--nowrap" style="white-space: nowrap" scope="row">
            <a [routerLink]="employee.id" class="employees-list__link">{{ employee.fullName }}</a>
          </th>
          <td class="employees-list__cell employees-list__cell--nowrap" style="white-space: nowrap">
            <ng-container *ngIf="employee.tjanster.length">
              {{ employee.tjanster[0] }}<ng-container *ngIf="employee.tjanster.length > 1">
                (+{{employee.tjanster.length - 1}})</ng-container
              >
            </ng-container>
            <ng-container *ngIf="!employee.tjanster.length">Tjänst saknas</ng-container>
          </td>
          <td class="employees-list__cell">
            <ng-container *ngIf="employee.utforandeVerksamheter.length && !employee.allaUtforandeVerksamheter">
              {{ employee.utforandeVerksamheter[0] }}<ng-container *ngIf="employee.utforandeVerksamheter.length > 1">
                (+{{employee.utforandeVerksamheter.length - 1}})</ng-container
              >
            </ng-container>
            <ng-container *ngIf="employee.allaUtforandeVerksamheter"> Alla utförande verksamheter </ng-container>
            <ng-container *ngIf="!employee.utforandeVerksamheter.length && !employee.allaUtforandeVerksamheter"
              >Utförande verksamheter saknas</ng-container
            >
          </td>
          <ng-template #noPermissions>
            <td class="employees-list__cell" colspan="2">Klicka på namnet för att ge personalkontot behörigheter</td>
          </ng-template>
          <!-- <td>
            <digi-button
              af-variation="tertiary"
              [afAriaLabel]="'Ta bort konto för ' + employee.fullName"
              (afOnClick)="emitDeleteEmployee(employee)"
            >
              <digi-icon-x style="--digi--ui--width--icon: 1.25rem" slot="icon"></digi-icon-x>
            </digi-button>
          </td> -->
        </tr>
      </tbody>
    </table>
  </digi-table>
  <digi-navigation-pagination
    *ngIf="totalPage > 1"
    class="employees-list__pagination"
    [afTotalPages]="totalPage"
    [afInitActivePage]="currentPage"
    [afCurrentResultStart]="currentResultStart"
    [afCurrentResultEnd]="currentResultEnd"
    [afTotalResults]="count"
    (afOnPageChange)="setNewPage($event.detail)"
    af-result-name="medarbetare"
  >
  </digi-navigation-pagination>
</div>

<ng-template #emptyText>
  <span aria-hidden="true">-</span>
  <span class="msfa__a11y-sr-only">Info saknas</span>
</ng-template>
