<section class="report-layout" *ngIf="contactInformation$ | async as contactInformation">
  <digi-typography>
    <h1>{{ reportTitle }}</h1>
    <p class="report-layout__description">{{description}}</p>
    <div class="report-layout__deltagare-info">
      <h2>{{reportSubTitle}}</h2>
      <div class="report-layout__name">{{contactInformation.fornamn + ' ' + contactInformation.efternamn}}</div>
      <div class="report-layout__personnummer">
        <span>Personnummer:</span>
        <msfa-hide-text
          symbols="********-****"
          [changingText]="contactInformation.personnummer"
          ariaLabelType="Personnumer"
        ></msfa-hide-text>
      </div>
      <span *ngIf="service">Tjänst: KROM</span>
      <ng-container *ngIf="startDate && endDate && !isPeriodDate">
        <span>Startdatum: {{startDate}}</span>
        <span>Slutdatum: {{endDate}}</span>
      </ng-container>
      <span *ngIf="startDate && endDate && isPeriodDate">Avser period: {{startDate}} - {{endDate}}</span>
    </div>

    <div class="report-layout__notification-alert">
      <digi-notification-alert
        *ngIf="showSuccessNotification"
        af-variation="success"
        af-heading="Allt gick bra"
        af-heading-level="h3"
      >
        <p>Din {{reportName}} är nu inskickad till Arbetsförmedlingen.</p>
      </digi-notification-alert>

      <digi-notification-alert
        *ngIf="showDangerNotification"
        af-variation="danger"
        af-heading="Någonting gick fel"
        af-heading-level="h3"
      >
        <p>Vi kunde inte skicka in din {{reportName}}.</p>
      </digi-notification-alert>
    </div>

    <digi-ng-progress-progressbar
      [afSteps]="totalAmountOfSteps"
      [afActiveStep]="currentStep"
    ></digi-ng-progress-progressbar>

    <div class="report-layout__main-content">
      <ng-content></ng-content>
    </div>

    <!-- <div class="report-layout__step-buttons-wrapper">
      <ng-container *ngIf="!showSuccessNotification">
        <ng-container *ngIf="currentStep > 1">
          <digi-button
            class="report-layout__step-buttons-wrapper--space-right"
            af-variation="secondary"
            af-size="m"
            (afOnClick)="previousStep()"
          >
            Tillbaka
          </digi-button>
        </ng-container>
        <ng-container *ngIf="currentStep < (totalAmountOfSteps -1)">
          <digi-button class="report-layout__step-buttons-wrapper" af-size="m" (afOnClick)="nextStep()">
            Nästa
          </digi-button>
        </ng-container>
      </ng-container>
      <ng-container *ngIf="currentStep === (totalAmountOfSteps -1)">
        <digi-button af-size="m" (afOnClick)="nextStep()"> Förhandsgranska </digi-button>
      </ng-container>
      <ng-container *ngIf="currentStep === totalAmountOfSteps">
        <digi-button af-size="m" (afOnClick)="sendRequest()"> Skicka in </digi-button>
      </ng-container>
      <ng-container *ngIf="showSuccessNotification">
        <digi-button af-size="m" (afOnClick)="backToDeltagare()"> Tillbaka till deltagaren </digi-button>
      </ng-container>
    </div> -->
  </digi-typography>
</section>
