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

  <digi-table af-size="s">
    <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">Datum för händelse</th>
        <th scope="col" class="deltagare-list-handelser__heading-row">Datum förklaring</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let handelse of deltagareHandelser$ | async">
        <td class="deltagare-list-handelser__table-cell">{{handelse.receivedDate | date}}</td>
        <td class="deltagare-list-handelser__table-cell" *ngIf="!handelse.isAvbrott; else isAvbrottCell">
          {{handelse.description}}</td>
        <td class="deltagare-list-handelser__table-cell">{{handelse.tidpunkt | date }}</td>
        <td class="deltagare-list-handelser__table-cell">{{handelse.tidpunktDescription}}</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>
  </digi-table>
</div>
