<digi-ng-dialog
  *ngIf="deltagare"
  [afActive]="deltagare"
  (afOnPrimaryClick)="emitCloseDialog()"
  (afOnSecondaryClick)="closeMotivation()"
  (afOnInactive)="emitCloseDialog()"
  [afHeading]="heading"
  afHeadingLevel="h2"
  afPrimaryButtonText="Stäng"
  [afSecondaryButtonText]="activeHandelseMotivation ? 'Tillbaka till alla händelser' : null"
>
  <div class="deltagare-list-handelser">
    <h3 *ngIf="activeHandelseMotivation" class="deltagare-list-handelser__sub-heading">{{deltagare.fullName}}</h3>
    <p>Genomförandereferens: <strong>{{deltagare.genomforandeReferens}}</strong></p>
    <ng-container *ngIf="deltagareHandelserData$ | async as deltagareHandelserData; else loadingRef">
      <ng-container *ngIf="activeHandelseMotivation; else handelseTableRef">
        <p>{{activeHandelseMotivation.motivation}}</p>
      </ng-container>

      <ng-template #handelseTableRef>
        <digi-table af-size="s" *ngIf="deltagareHandelserData.data.length > 0; else noEventsRef">
          <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>
                <th scope="col" class="deltagare-list-handelser__heading-row">Motivering</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"
                  [ngClass]="{'deltagare-list-handelser__table-cell--avbrott': handelse.isAvbrott}"
                >
                  <ui-icon *ngIf="handelse.isAvbrott" [uiType]="IconType.WARNING" [uiSize]="IconSize.L"></ui-icon>
                  {{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>
                <td class="deltagare-list-handelser__table-cell">
                  <digi-button
                    *ngIf="handelse.motivation"
                    af-variation="tertiary"
                    af-size="s"
                    (click)="openMotivation(handelse)"
                  >
                    <ui-icon slot="icon" uiType="info"></ui-icon>
                    Motivering till beslut
                  </digi-button>
                </td>
              </tr>
            </tbody>
          </table>
        </digi-table>
        <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>
      </ng-template>
    </ng-container>
  </div>
</digi-ng-dialog>

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