<div class="slutredovisning-form-step3">
  <h2>Förhandsgranskning</h2>

  <div
    class="slutredovisning-form-step3__confirmation"
    *ngIf="submittedDate$ | async as submittedDate; else previewRef"
  >
    <digi-notification-alert af-variation="success" af-heading="Allt gick bra" af-heading-level="h3">
      <p>Slutredovisning för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen.</p>
      <dl>
        <dt>Datum</dt>
        <dd>{{submittedDate | date:'longDate'}} kl {{submittedDate | date:'shortTime'}}</dd>
      </dl>
    </digi-notification-alert>
    <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
  </div>

  <ng-template #previewRef>
    <div class="slutredovisning-form-step3__preview">
      <ui-loader *ngIf="submitIsLoading$ | async" uiType="absolute"></ui-loader>
      <msfa-slutredovisning-view-description-list
        [slutredovisning]="slutredovisning$ | async"
      ></msfa-slutredovisning-view-description-list>

      <digi-notification-alert
        *ngIf="submitError$ | async as error"
        class="slutredovisning-form-step3__alert"
        af-variation="danger"
        af-heading="Någonting gick fel"
      >
        <p>Kunde inte skicka in Slutredovisning. Försök igen om en stund.</p>
        <p *ngIf="error.message" class="msfa__small-text">{{error.message}}</p>
      </digi-notification-alert>

      <footer class="slutredovisning-form-step3__footer">
        <digi-button af-type="button" (click)="submitSlutredovisning()">Skicka in Slutredovisning</digi-button>
        <digi-button af-type="button" af-variation="secondary" (click)="goBack()">
          Tillbaka
          <span class="msfa__a11y-sr-only">&nbsp;till steg förgående steg</span>
        </digi-button>
      </footer>
    </div>
  </ng-template>
</div>
