<div class="deltagare-list-handelser">
  <p>Genomförandereferens: <strong>{{deltagare?.genomforandeReferens}}</strong></p>

  <digi-table af-size="s" *ngIf="deltagareHandelserData$ | async as deltagareHandelserData; else loadingRef">
    <ng-container *ngIf="deltagareHandelserData.data.length > 0; else noEvents">
      <table>
        <caption class="msfa__a11y-sr-only">
          Lista med alla händelser för {{deltagare?.fullName}}
        </caption>
        <thead>
          <tr>
            <th scope="col" class="deltagare-list-handelser__heading-row">Inkom</th>
            <th scope="col" class="deltagare-list-handelser__heading-row">Händelse</th>
            <th scope="col" class="deltagare-list-handelser__heading-row">Effekt</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let handelse of deltagareHandelserData.data;">
            <td class="deltagare-list-handelser__table-cell">
              <digi-typography-time [afDateTime]="getHandelseDate(handelse, 'receivedDate')"></digi-typography-time>
            </td>
            <td class="deltagare-list-handelser__table-cell" *ngIf="!handelse.isAvbrott; else isAvbrottCell">
              {{handelse.description}}
            </td>
            <td class="deltagare-list-handelser__table-cell">
              <ng-container *ngIf="handelse.effectDescription && handelse.effectDate">
                {{handelse.effectDescription}}:
                <digi-typography-time [afDateTime]="getHandelseDate(handelse)"></digi-typography-time>
              </ng-container>
            </td>
            <ng-template #isAvbrottCell>
              <td class="deltagare-list-handelser__avbrott-cell">
                <msfa-icon [icon]="iconType.WARNING" size="l"></msfa-icon>
                {{handelse.description}}
              </td>
            </ng-template>
          </tr>
        </tbody>
      </table>
    </ng-container>
    <ng-container *ngIf="deltagareHandelserData.meta as paginationMeta">
      <digi-navigation-pagination
        *ngIf="paginationMeta?.totalPage > 1"
        class="deltagare-list-handelser__pagination"
        [afTotalPages]="paginationMeta?.totalPage"
        [afInitActivePage]="paginationMeta?.page"
        [afCurrentResultStart]="currentResultStart(paginationMeta)"
        [afCurrentResultEnd]="currentResultEnd(paginationMeta)"
        [afTotalResults]="paginationMeta?.count"
        (afOnPageChange)="setNewPage($event.detail)"
        af-result-name="händelser"
      >
      </digi-navigation-pagination>
    </ng-container>
  </digi-table>
</div>

<ng-template #noEvents>
  <p>Inga händelser har inkommit.</p>
</ng-template>
<ng-template #loadingRef>
  <ui-loader></ui-loader>
</ng-template>
