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