<div class="deltagare-list">
  <digi-table af-variation="secondary">
    <table class="deltagare-list__table">
      <caption class="msfa__a11y-sr-only">Tabell med de deltagare som tillhör organistaionen.</caption>
      <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>
        <td>{{ singleDeltagare.startdatumAvrop | date }}</td>
        <td>
          {{ singleDeltagare.slutdatumAvrop | date }}
          <div class="deltagare-list__avbrott-alert" *ngIf="singleDeltagare.hasAvbrott">
            <msfa-icon [icon]="iconType.WARNING" size="l"></msfa-icon>
            Avbrott
          </div>
        </td>
        <td>
          <digi-button
            af-variation="tertiary"
            af-size="s"
            (click)="openHandelser(singleDeltagare)"
            aria-controls="deltagareHandelser"
          >
            <digi-icon-info-circle-reg class="deltagare-list__info-icon" slot="icon"></digi-icon-info-circle-reg>
            Visa händelser
          </digi-button>
        </td>
      </tr>
      </tbody>
    </table>
  </digi-table>

  <digi-ng-dialog
    [afActive]="handelserDialogIsOpen$ | async"
    (afOnPrimaryClick)="closeHandelser()"
    (afOnInactive)="closeHandelser()"
    *ngIf="handelserDialogDeltagare$ | async; let deltagare"
    [afHeading]="'Händelser för ' + deltagare.fullName"
    afHeadingLevel="h2"
    [afPrimaryButtonText]="'Stäng'"
    id="deltagareHandelser"
  >
    <msfa-deltagare-list-handelser-dialog
      [deltagare]="deltagare"
    ></msfa-deltagare-list-handelser-dialog>
  </digi-ng-dialog>

  <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>
