<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop; else skeletonRef"
    reportTitle="Informativ rapport"
    [avrop]="avrop"
  >
    <div class="informativ-rapport-view" *ngIf="informativRapport$ | async as report; else loadingRef">
      <dl>
        <dt>Vad gäller ärendet</dt>
        <dd>{{report.category}}</dd>
        <dt>Kompletterande information</dt>
        <dd>{{report.comment}}</dd>
      </dl>
      <footer class="informativ-rapport-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 Informativ rapport"></ui-skeleton>
</ng-template>

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