<c8y-modal
  [title]="'Actility LoRa registration' | translate"
  [headerClasses]="'dialog-header'"
  [customFooter]="true"
>
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'c8y-device-connect'"></span>
  </ng-container>

  <ng-container *ngIf="state === 'loadPending'; else registrationForm">
    <div class="p-16 text-center">
      <c8y-loading></c8y-loading>
    </div>
  </ng-container>

  <!--Formly schema is rendered-->
  <ng-template #registrationForm>
    <c8y-stepper
      [hideStepProgress]="true"
      c8y-modal-body
      linear
      *ngIf="(errorMessages$ | async).length === 0; else errorMessagesPresent"
    >
      <cdk-step [stepControl]="form">
        <div class="p-b-16">
          <p class="modal-subtitle sticky-top">
            {{ 'Register a single Actility device' | translate }}
          </p>
          <formly-form
            class="formly-group-array-cols d-block p-l-24 p-r-24 p-t-16"
            [form]="form"
            [fields]="fields"
            [model]="model"
          ></formly-form>
        </div>

        <c8y-stepper-buttons
          class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0"
          [labels]="registrationStepLabels"
          (onNext)="register($event)"
          (onCancel)="bsModalRef.hide()"
          [showButtons]="{ cancel: true, next: true }"
          [pending]="state === 'registrationPending'"
          [disabled]="!form?.valid"
        ></c8y-stepper-buttons>
      </cdk-step>
      <cdk-step state="final">
        <!--success scenario-->
        <div
          class="p-16 text-center"
          *ngIf="state === 'registrationPending'"
        >
          <c8y-loading></c8y-loading>
        </div>
        <div class="m-24">
          <c8y-operation-result
            class="lead m-b-0"
            type="success"
            *ngIf="state === 'registrationSuccess'"
            text="{{ 'Device registered' | translate }}"
            [size]="84"
            [vertical]="true"
          ></c8y-operation-result>
        </div>
        <c8y-stepper-buttons
          class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0"
          (onCustom)="bsModalRef.hide()"
          [showButtons]="{ custom: true }"
          [labels]="finalStepLabels"
        ></c8y-stepper-buttons>
      </cdk-step>
    </c8y-stepper>
  </ng-template>

  <!--Failure scenario-->
  <ng-template #errorMessagesPresent>
    <div class="m-24">
      <c8y-operation-result
        class="lead"
        type="error"
        *ngIf="state === 'registrationError'"
        text="{{ 'Failed to register' | translate }}"
        [size]="84"
        [vertical]="true"
      ></c8y-operation-result>
      <div
        class="m-b-8"
        *ngFor="let msg of errorMessages$ | async"
        data-cy="actility-device-registration.component--registration-error"
        [ngClass]="{
          'text-center': state === 'registrationError',
          'alert alert-danger': state === 'loadError'
        }"
      >
        <span [innerHTML]="msg | translate"></span>
      </div>
    </div>
    <div class="modal-footer">
      <button
        class="btn btn-default"
        title="{{ 'Close' | translate }}"
        type="button"
        (click)="bsModalRef.hide()"
      >
        {{ 'Close' | translate }}
      </button>
    </div>
  </ng-template>
</c8y-modal>