<h2>Aktiviteter</h2>
<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>{{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('description')?.errors?.required"
        [uiInvalid]="activityFormGroup.get('description')?.touched  && !!activityFormGroup.get('description')?.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-report-form-step1__footer">
      <digi-button af-type="button" af-variation="tertiary" (click)="goBack()">
        <digi-icon-arrow-left slot="icon"></digi-icon-arrow-left>
        Tillbaka
      </digi-button>
      <digi-button af-type="submit">Nästa</digi-button>
    </footer>
  </ng-container>
</form>

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