<c8y-modal
  [title]="'Register devices' | translate"
  [headerClasses]="'dialog-header'"
  [customFooter]="true"
>
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'c8y-device-connect'"></span>
  </ng-container>
  <c8y-stepper [hideStepProgress]="true" linear c8y-modal-body>
    <cdk-step [stepControl]="form">
      <div class="text-center sticky-top bg-component">
        <p class="text-medium text-16 separator-bottom p-16" translate>Register general devices</p>
        <label
          class="c8y-switch m-24 a-i-center"
          title="{{ 'Create device certificates during device registration' | translate }}"
          for="useEST"
          *ngIf="certificateAuthorityFeatureEnabled | async"
        >
          <input
            type="checkbox"
            name="useEST"
            id="useEST"
            [ngModel]="useEST$.getValue()"
            (ngModelChange)="useEST$.next($event)"
          />
          <span></span>
          <span class="control-label">{{ 'Create device certificates during device registration' | translate }}</span>
          <button
            type="button"
            class="btn-help"
            [attr.aria-label]="'Help' | translate"
            popover="{{ 'The device registration process includes creating device certificates, which are issued by the tenant\'s Certificate Authority (CA).' | translate }}"
            placement="right"
            triggers="focus"
            container="body"
          ></button>
        </label>
      </div>
      <div>
        <formly-form
          [form]="form"
          [fields]="fields"
          [model]="model"
          [options]="options"
          class="formly-group-array-cols d-block p-l-24 p-b-24 min-height-fit p-r-8"
          [ngClass]="{'p-t-24' : !(certificateAuthorityFeatureEnabled | async)}"
        ></formly-form>
      </div>
      <c8y-stepper-buttons
        (onNext)="registerDevice($event)"
        (onCancel)="bsModalRef.hide()"
        [showButtons]="{ cancel: true, next: true }"
        [disabled]="!form?.valid"
        [pending]="isLoading$ | async"
        class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0"
      ></c8y-stepper-buttons>
    </cdk-step>
    <cdk-step state="final">
      <div class="p-24 min-height-fit">
        <c8y-operation-result
          *ngIf="success.length === 1 && failed.length === 0"
          text="{{ 'Device registered' | translate }}"
          [size]="84"
          [vertical]="true"
          type="success"
          class="lead"
        ></c8y-operation-result>
        <c8y-operation-result
          *ngIf="success.length === 0 && failed.length === 1"
          text="{{ 'Failed to register device' | translate }}"
          [size]="84"
          [vertical]="true"
          type="error"
          class="lead"
        ></c8y-operation-result>

        <ng-container *ngIf="success.length > 1 || failed.length > 1">
          <c8y-operation-result
            *ngIf="failed.length === 0"
            [text]="
              '{{ successfulDevicesCount }} devices registered'
                | translate: { successfulDevicesCount: success.length }
            "
            [size]="84"
            [vertical]="true"
            type="success"
            class="lead"
          ></c8y-operation-result>
          <c8y-operation-result
            *ngIf="success.length === 0"
            [text]="
              '{{ failedDevicesCount }} devices failed to register'
                | translate: { failedDevicesCount: failed.length }
            "
            [size]="84"
            [vertical]="true"
            type="error"
            class="lead"
          ></c8y-operation-result>
        </ng-container>

        <div *ngIf="success.length > 0 && failed.length > 0" class="p-l-24 p-r-24 text-center">
          <c8y-operation-result
            text="{{ 'Several devices failed to register' | translate }}"
            [size]="84"
            [vertical]="true"
            type="error"
            class="lead"
          ></c8y-operation-result>
          <p
            ngNonBindable
            translate
            [translateParams]="{ count: failed.length, total: failed.length + success.length }"
            class="p-b-16 text-danger"
          >
            Registration failed for {{ count }} devices out of {{ total }}.
          </p>
        </div>

        <div class="m-b-8 p-l-24 p-r-24" *ngIf="success.length > 0" translate>
          Turn on the registered device(s) and wait for connection(s) to be established. Once a
          device is connected, its status will change to "Pending acceptance". You will need to
          approve it by clicking on the "Accept" button.
        </div>

        <c8y-list-group class="separator-top m-t-16">
          <c8y-li *ngFor="let fail of failed">
            <c8y-li-icon class="text-danger" [icon]="'ban'"></c8y-li-icon>
            <p>{{ fail?.id }}</p>
            <small>{{ fail?.message | translate }}</small>
            <c8y-li-collapse>
              <pre><code>{{ fail?.details | json }}</code></pre>
            </c8y-li-collapse>
          </c8y-li>

          <c8y-li *ngFor="let s of success">
            <c8y-li-icon class="text-success" [icon]="'check-circle'"></c8y-li-icon>
            {{ s?.id }}
          </c8y-li>
        </c8y-list-group>
      </div>
      <c8y-stepper-buttons
        class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-level-0"
        (onCustom)="bsModalRef.hide()"
        (onBack)="fixErrors($event, failed)"
        [showButtons]="{ back: failed.length > 0, custom: true }"
        [labels]="{ back: 'Fix errors', custom: 'Close' }"
      ></c8y-stepper-buttons>
    </cdk-step>
  </c8y-stepper>
</c8y-modal>