<div class="slutredovisning-form-step1">
  <h2>Aktiviteter</h2>
  <form
    class="slutredovisning-form-step1__form"
    [formGroup]="formGroup"
    name="report-form"
    (ngSubmit)="verifyAndEmitData()"
  >
    <ng-container *ngIf="activitiesFormArray.controls.length; else loadingRef" [formArrayName]="ACTIVITES_FORM_NAME">
      <div
        class="slutredovisning-form__activity"
        *ngFor="let activityFormGroup of activitiesFormArray.controls; let i=index"
        [formGroupName]="i"
      >
        <h3 class="slutredovisning-form-step1__sub-heading">{{activityFormGroup.get('name').value}}</h3>
        <ui-textarea
          formControlName="whatHasBeenDone"
          uiLabel="Beskriv vad deltagaren har gjort inom aktiviteten"
          [uiAnnounceIfOptional]="true"
          [uiMaxLength]="2000"
          [uiMinLength]="1"
          [uiRequired]="true"
          [uiValidationMessage]="activityFormGroup.get('whatHasBeenDone')?.errors?.required"
          [uiInvalid]="activityFormGroup.get('whatHasBeenDone')?.touched  && !!activityFormGroup.get('whatHasBeenDone')?.errors?.required"
        ></ui-textarea>
      </div>
      <!--    TODO: If something is required at the top of the form it will be hard to see when at the bottom and clicking next -->

      <footer class="slutredovisning-form-step1__footer">
        <digi-button af-type="submit" msfaPreventDoubleSubmit>Nästa</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>
    </ng-container>
  </form>
</div>

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