<msfa-layout>
  <msfa-report-layout *ngIf="avrop$ | async as avrop; else skeletonRef" reportTitle="Slutredovisning" [avrop]="avrop">
    <div class="slutredovisning-view" *ngIf="slutredovisning$ | async as slutredovisning; else loadingRef">
      <digi-notification-alert
        *ngIf="slutredovisning.motivation && statusIsFailed(slutredovisning.status)"
        af-variation="danger"
      >
        <h3>Status: {{slutredovisning.status}}</h3>
        <p>{{slutredovisning.motivation}}</p>
      </digi-notification-alert>
      <digi-notification-alert *ngIf="!statusIsFailed(slutredovisning.status)" af-variation="info">
        <h3>Status: {{slutredovisning.status}}</h3>
        <p *ngIf="slutredovisning.motivation">{{slutredovisning.motivation}}</p>
      </digi-notification-alert>
      <msfa-slutredovisning-view-description-list
        [slutredovisning]="slutredovisning"
      ></msfa-slutredovisning-view-description-list>
      <footer class="slutredovisning-view__footer">
        <ui-back-link uiRouterLink="../../">Tillbaka till deltagaren</ui-back-link>
      </footer>
    </div>
  </msfa-report-layout>
</msfa-layout>

<ng-template #skeletonRef>
  <ui-skeleton [uiCount]="3" uiText="Laddar Slutredovisning"></ui-skeleton>
</ng-template>

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