<c8y-modal
  [title]="title | translate"
  [headerClasses]="'dialog-header'"
  [customFooter]="true"
>
  <ng-container c8y-modal-title>
    <span class="c8y-icon c8y-icon-device-connect"></span>
  </ng-container>
  <ng-container *ngIf="pages as steps; else loadingOrError">
    <c8y-extensible-device-registration-stepper
      c8y-modal-body
      [steps]="steps"
      [labels]="labels"
      [contextPath]="contextPath"
    ></c8y-extensible-device-registration-stepper>
  </ng-container>
  <ng-template #loadingOrError>
    <ng-container *ngIf="loadingErrorMessage; else loading">
      <c8y-operation-result
        class="lead text-regular"
        type="error"
        text="{{ loadingErrorMessage | translate }}"
        [size]="84"
        [vertical]="true"
        data-cy="error"
      ></c8y-operation-result>
      <div class="modal-footer">
        <button
          class="btn btn-default"
          title="{{ 'Close' | translate }}"
          type="button"
          (click)="bsModalRef.hide()"
        >
          {{ 'Close' | translate }}
        </button>
      </div>
    </ng-container>
    <ng-template #loading>
      <div class="modal-header modal-header-info text-center">
        <c8y-loading
          class="text-center"
          layout="application"
          [message]="'Loading the registration form definition…' | translate"
        ></c8y-loading>
      </div>
    </ng-template>
  </ng-template>
</c8y-modal>