<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop; else skeletonRef"
    reportTitle="Avvikelserapport (avvikelse)"
    [avrop]="avrop"
  >
    <div class="avvikelse-report-view" *ngIf="avvikelseReport$ | async as report; else loadingRef">
      <dl *ngIf="report.avvikelse as avvikelse">
        <dt>Orsak till avvikelse:</dt>
        <dd>{{avvikelse.reason}}</dd>
        <ng-container *ngFor="let question of avvikelse.questions">
          <dt>{{question.question}}</dt>
          <dd>{{question.answer || 'Inget svar' }}</dd>
        </ng-container>
        <dt>Dag för avvikelse:</dt>
        <dd><digi-typography-time [afDateTime]="avvikelse.date"></digi-typography-time></dd>
      </dl>
      <footer class="avvikelse-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 (avvikelse)"></ui-skeleton>
</ng-template>

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