<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop; else skeletonRef"
    reportTitle="Avvikelserapport (frånvaro)"
    [avrop]="avrop"
  >
    <div class="franvaro-report-view" *ngIf="franvaroReport$ | async as report; else loadingRef">
      <dl>
        <ng-container *ngIf="report.franvaro as franvaro">
          <dt>Orsak till frånvaro</dt>
          <dd>{{franvaro.reason === "Annan känd orsak" ? franvaro.otherKnownReason : franvaro.reason }}</dd>
          <ng-container *ngIf="franvaro.knownReasonComment">
            <dt>Beskrivning för frånvaro</dt>
            <dd>{{franvaro.knownReasonComment}}</dd>
          </ng-container>
          <dt>Dag för frånvaro</dt>
          <dd>
            <digi-typography-time [afDateTime]="franvaro.date"></digi-typography-time>
          </dd>
          <dt>Heldag eller del av dag</dt>
          <dd>{{franvaro.wholeDay ? 'Heldag' : 'Del av dag'}}</dd>
          <ng-container *ngIf="!franvaro.wholeDay">
            <dt>Tid för frånvaro</dt>
            <dd>{{franvaro.startTime}} - {{franvaro.endTime}}</dd>
          </ng-container>
          <dt>Tid för förväntad närvaro</dt>
          <dd>{{franvaro.expectedPresenceStartTime}} - {{franvaro.expectedPresenceEndTime}}</dd>
        </ng-container>
      </dl>
      <footer class="franvaro-report-view__footer">
        <msfa-back-link route="../../">Tillbaka till deltagaren</msfa-back-link>
      </footer>
    </div>
  </msfa-report-layout>
</msfa-layout>

<ng-template #skeletonRef>
  <ui-skeleton [uiCount]="3" uiText="Laddar Avvikelserapport (frånvaro)"></ui-skeleton>
</ng-template>

<ng-template #loadingRef>
  <ui-loader uiType="padded"></ui-loader>
</ng-template>
