<div class="deltagare-list">
  <ui-loader *ngIf="deltagareLoading" uiType="absolute"></ui-loader>
  <digi-table af-variation="secondary">
    <span class="msfa__a11y-sr-only" aria-live="polite">
      Totalt {{count}} träffar på deltagare med max 10 rader på varje sida
    </span>
    <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">
            {{column.label}}
            <!-- <button
              class="deltagare-list__sort-button"
              [attr.id]="'sort-button-' + column.key"
              (click)="handleSort(column.key)"
            >
              <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.genomforandeReferens" class="deltagare-list__link"
              >{{ singleDeltagare.fullName }}</a
            >
          </th>
          <td>{{ singleDeltagare.tjanst }}</td>
          <td>{{ singleDeltagare.utforandeVerksamhet }}</td>
          <td>
            <digi-typography-time
              [afDateTime]="getAvropDate(singleDeltagare, 'startdatumAvrop')"
            ></digi-typography-time>
          </td>

          <td>
            <digi-typography-time [afDateTime]="getAvropDate(singleDeltagare)"></digi-typography-time>
            <div class="deltagare-list__avbrott-alert" *ngIf="singleDeltagare.hasAvbrott">
              <msfa-icon [icon]="iconType.WARNING" size="l"></msfa-icon>
              Avbrott
            </div>
          </td>
          <td>{{ singleDeltagare.genomforandeReferens }}</td>
          <td>
            <digi-button
              class="deltagare-list__handelse-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-navigation-pagination
    *ngIf="totalPage > 1"
    class="deltagare-list__pagination"
    [afTotalPages]="totalPage"
    [afInitActivePage]="currentPage"
    [afCurrentResultStart]="currentResultStart"
    [afCurrentResultEnd]="currentResultEnd"
    [afTotalResults]="count"
    (afOnPageChange)="setNewPage($event.detail)"
    af-result-name="deltagare"
  >
  </digi-navigation-pagination>
</div>

<digi-ng-dialog
  *ngIf="handelserDialogDeltagare$ | async as deltagare"
  [afActive]="handelserDialogIsOpen$ | async"
  (afOnPrimaryClick)="closeHandelser()"
  (afOnInactive)="closeHandelser()"
  [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>
