<msfa-layout>
  <msfa-report-layout
    *ngIf="avrop$ | async as avrop, else skeletonRef"
    [avrop]="avrop"
    description="Här skickar du signal om att deltagare har påbörjat anställning eller studier."
    reportTitle="Skapa Signal om arbete eller studier"
  >
    <div class="signal-form" *ngIf="currentGenomforandeReferens$ | async as genomforandeReferens">
      <div class="signal-form__confirmation" *ngIf="lastSubmittedSignal$ | async as lastSubmittedSignal; else formRef">
        <digi-notification-alert af-variation="success" af-heading="Allt gick bra" af-heading-level="h3">
          <p>
            Signal om arbete eller studier för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen och
            inväntar godkännande.
          </p>
          <dl>
            <dt>Datum</dt>
            <dd>{{lastSubmittedSignal | date:'longDate'}} kl {{lastSubmittedSignal | date:'shortTime'}}</dd>
          </dl>
        </digi-notification-alert>
        <msfa-back-link route="../">Tillbaka till deltagaren</msfa-back-link>
      </div>

      <ng-template #formRef>
        <form class="signal-form__form" [formGroup]="signalFormGroup" id="signal-form" (ngSubmit)="openConfirmDialog()">
          <div class="signal-form__form-item">
            <digi-ng-form-select
              [formControl]="typeFormControl"
              afLabel="Typ av sysselsättning"
              afPlaceholder="Välj typ av sysselsättning"
              [afSelectItems]="typeSelectItems"
              [afRequired]="true"
              [afAnnounceIfOptional]="true"
              [afDisableValidStyle]="true"
              [afInvalid]="formControlIsInvalid('type')"
            ></digi-ng-form-select>
            <div aria-atomic="true" role="alert">
              <digi-ng-form-validation-message
                *ngIf="formControlIsInvalid('type')"
                class="signal-form__validation-message"
                [afPositive]="false"
                [afValidationText]="formErrors.type"
              ></digi-ng-form-validation-message>
            </div>
          </div>
          <div class="signal-form__form-item">
            <digi-form-fieldset af-legend="Omfattning" af-name="omfattning" af-form="signal-form">
              <ui-radiobutton-group
                formControlName="omfattning"
                [uiRequired]="true"
                [uiAnnounceIfOptional]="true"
                [uiRadiobuttons]="omfattningRadioButtons"
              ></ui-radiobutton-group>
            </digi-form-fieldset>
            <div aria-atomic="true" role="alert">
              <digi-ng-form-validation-message
                *ngIf="formControlIsInvalid('omfattning')"
                class="signal-form__validation-message"
                [afPositive]="false"
                [afValidationText]="formErrors.omfattning"
              ></digi-ng-form-validation-message>
            </div>
          </div>
          <div class="signal-form__form-item" *ngIf="showPercentFormControl">
            <digi-ng-form-range
              class="signal-form__percent-range"
              [afMin]="5"
              [afMax]="100"
              [afStep]="5"
              afValueSuffix="%"
              [formControl]="percentFormControl"
              afLabel="Antal procent vid deltid"
            ></digi-ng-form-range>
            <div aria-atomic="true" role="alert">
              <digi-ng-form-validation-message
                *ngIf="formControlIsInvalid('percent')"
                class="signal-form__validation-message"
                [afPositive]="false"
                [afValidationText]="formErrors.percent"
              ></digi-ng-form-validation-message>
            </div>
          </div>

          <div class="signal-form__form-item">
            <digi-ng-form-datepicker
              [formControl]="startDateFormControl"
              [afLabel]="'Startdatum för ' + (typeFormControl.value || 'arbete/utbildning')"
              [afDisableValidStyle]="true"
              [afRequired]="true"
              [afInvalid]="formControlIsInvalid('startDate')"
              [afAnnounceIfOptional]="true"
              [afMinDate]="avrop.startDate"
              [afMaxDate]="getMaxDate(avrop.startDate)"
            ></digi-ng-form-datepicker>
            <div aria-atomic="true" role="alert">
              <digi-ng-form-validation-message
                *ngIf="formControlIsInvalid('startDate')"
                class="signal-form__validation-message"
                [afPositive]="false"
                [afValidationText]="formErrors.startDate"
              ></digi-ng-form-validation-message>
            </div>
          </div>

          <footer class="signal-form__footer">
            <div class="signal-form__cta-wrapper">
              <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
              <msfa-back-link [showIcon]="false" [asButton]="true" route="../">
                <span>Avbryt</span>
                <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
              </msfa-back-link>
            </div>
          </footer>

          <digi-ng-dialog
            [afActive]="confirmDialogOpen$ | async"
            (afOnPrimaryClick)="submitAndCloseConfirmDialog(genomforandeReferens)"
            (afOnInactive)="cancelConfirmDialog()"
            afHeadingLevel="h2"
            afPrimaryButtonText="Skicka in"
            afSecondaryButtonText="Avbryt"
            (afOnSecondaryClick)="cancelConfirmDialog()"
            afHeading="Vill du skicka in Signal om arbete eller studier"
            afAriaLabel="Förhandsgranska och skicka in Signal om arbete eller studier"
            id="confirm-signal"
          >
            <ui-loader *ngIf="submitLoading$ | async" uiType="absolute"></ui-loader>
            <msfa-report-description-list [avrop]="avrop">
              <dt>Typ av sysselsättning</dt>
              <dd>{{typeFormControl.value}}</dd>
              <dt>Omfattning</dt>
              <dd>{{omfattningFormControl.value}}</dd>
              <ng-container *ngIf="showPercentFormControl">
                <dt>Antal procent vid deltid</dt>
                <dd>{{percentFormControl.value}}%</dd>
              </ng-container>
              <dt>Startdatum</dt>
              <dd><digi-typography-time [afDateTime]="startDateFormValueAsDate"></digi-typography-time></dd>
            </msfa-report-description-list>
            <digi-notification-alert
              *ngIf="error$ | async as error"
              class="signal-form__alert"
              af-variation="danger"
              af-heading="Någonting gick fel"
            >
              <p>Kunde inte spara Signal om arbete eller studier. Ladda om sidan och försök igen.</p>
              <p *ngIf="error.message" class="msfa__small-text">{{error.message}}</p>
            </digi-notification-alert>
          </digi-ng-dialog>
        </form>
      </ng-template>
    </div>
  </msfa-report-layout>
</msfa-layout>

<ng-template #skeletonRef>
  <ui-skeleton [uiCount]="3" uiText="Laddar data för att kunna skapa Signal om arbete eller studier"></ui-skeleton>
</ng-template>
