<div class="deltagare-list">
  <digi-table af-variation="secondary">
    <table>
      <thead>
        <tr>
          <th scope="col" class="deltagare-list__column-head" *ngFor="let column of columnHeaders">
            <button
              class="deltagare-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="deltagare-list__sort-icon"
                  *ngIf="sort.order === orderType.ASC"
                ></digi-icon-caret-up>
                <digi-icon-caret-down
                  class="deltagare-list__sort-icon"
                  *ngIf="sort.order === orderType.DESC"
                ></digi-icon-caret-down>
              </ng-container>
            </button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="deltagare-list__row" *ngFor="let singleDeltagare of deltagare">
          <th scope="row">
            <a [routerLink]="singleDeltagare.id" class="deltagare-list__link">{{ singleDeltagare.fullName }}</a>
          </th>
          <td>{{ singleDeltagare.tjanst }}</td>
          <td>{{ singleDeltagare.utforandeVerksamhet }}</td>
        </tr>
      </tbody>
    </table>
  </digi-table>

  <digi-navigation-pagination
    *ngIf="totalPage > 1"
    class="deltagare-list__pagination"
    [afTotalPages]="totalPage"
    [afCurrentResultStart]="currentResultStart"
    [afCurrentResultEnd]="currentResultEnd"
    [afTotalResults]="count"
    (afOnPageChange)="setNewPage($event.detail)"
    af-result-name="deltagare"
  >
  </digi-navigation-pagination>
</div>
