<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>
        <ui-back-link uiRouterLink="../">Tillbaka till deltagaren</ui-back-link>
      </div>

      <ng-template #formRef>
        <form class="signal-form__form" [formGroup]="signalFormGroup" id="signal-form" (ngSubmit)="openConfirmDialog()">
          <ui-select
            [formControl]="typeFormControl"
            uiLabel="Typ av sysselsättning"
            uiPlaceholder="Välj typ av sysselsättning"
            [uiOptions]="typeSelectItems"
            [uiRequired]="true"
            [uiAnnounceIfOptional]="true"
            [uiInvalid]="formControlIsInvalid(typeFormName)"
            [uiValidationMessage]="formErrors.type"
          ></ui-select>
          <digi-form-fieldset af-legend="Omfattning" af-name="omfattning" af-form="signal-form">
            <ui-radiobutton-group
              [formControl]="omfattningFormControl"
              [uiRequired]="true"
              [uiAnnounceIfOptional]="true"
              [uiRadiobuttons]="omfattningRadioButtons"
              [uiInvalid]="formControlIsInvalid(omfattningFormName)"
              [uiValidationMessage]="formErrors.omfattning"
            ></ui-radiobutton-group>
          </digi-form-fieldset>
          <ui-input
            *ngIf="showPercentFormControl"
            class="signal-form__number-input"
            [formControl]="percentFormControl"
            uiType="number"
            [uiMin]="1"
            [uiMax]="99"
            uiLabel="Antal procent vid deltid"
            [uiRequired]="true"
            [uiAnnounceIfOptional]="true"
            [uiInvalid]="formControlIsInvalid(percentFormName)"
            [uiValidationMessage]="formErrors.percent"
          ></ui-input>

          <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(startDateFormName)"
              [afAnnounceIfOptional]="true"
              [afMinDate]="avrop.startDate"
              [afMaxDate]="getMaxDate(avrop.startDate)"
            ></digi-ng-form-datepicker>
            <ui-validation-message
              [uiShowValidationMessage]="formControlIsInvalid('startDate')"
              [uiValidationMessage]="formErrors.startDate"
            ></ui-validation-message>
          </div>

          <footer class="signal-form__footer">
            <div class="signal-form__cta-wrapper">
              <digi-button af-type="submit" af-size="m">Förhandsgranska</digi-button>
              <ui-link-button uiRouterLink="../" uiType="secondary">
                Avbryt
                <span class="msfa__a11y-sr-only">&nbsp;och gå tillbaka till deltagaren</span>
              </ui-link-button>
            </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>{{convertTypeValueToLabel(typeFormControl.value)}}</dd>
              <dt>Omfattning</dt>
              <dd>{{convertOmfattningValueToLabel(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>
