<c8y-stepper
  [disableDefaultIcons]="{ edit: true, done: false }"
  [customClasses]="['m-40', 'm-t-16', 'm-b-16']"
>
  <cdk-step *ngFor="let step of steps; let i = index" [stepControl]="forms[i]" [label]="labels[i]">
    <c8y-form-group class="form-group p-24 p-b-0 p-t-16">
      <formly-form [form]="forms[i]" [fields]="step" [model]="model"></formly-form>
    </c8y-form-group>
    <c8y-stepper-buttons
      class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-white"
      *ngIf="isRegistrationStep()"
      [showButtons]="{ cancel: true, back: true, next: true }"
      [labels]="{ next: 'Register' }"
      (onCancel)="close()"
      (onNext)="save()"
      [pending]="pendingStatus"
      [disabled]="forms[i].invalid"
    ></c8y-stepper-buttons>
    <c8y-stepper-buttons
      class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-white"
      *ngIf="!isRegistrationStep()"
      [showButtons]="{ cancel: true, back: i !== 0, next: true }"
      [disabled]="forms[i].invalid"
      (onCancel)="close()"
    ></c8y-stepper-buttons>
  </cdk-step>
  <cdk-step [state]="finalStepStatus()" label="{{ 'Summary' | translate }}">
    <c8y-operation-result
      *ngIf="!errorMessage; else errorInfo"
      text="{{ message | translate }}"
      [size]="84"
      [vertical]="true"
      type="success"
      class="lead"
    ></c8y-operation-result>
    <ng-template #errorInfo>
      <c8y-operation-result
        text="{{ errorMessage | translate }}"
        [size]="84"
        [vertical]="true"
        type="error"
        class="lead"
      ></c8y-operation-result>
    </ng-template>
    <c8y-stepper-buttons
      class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-white"
      [showButtons]="{ cancel: errorMessage, back: errorMessage, next: !errorMessage }"
      [labels]="{ back: 'Fix issue', next: 'Close' }"
      (onCancel)="close()"
      (onNext)="complete()"
      (onBack)="goToFirstStep()"
    ></c8y-stepper-buttons>
  </cdk-step>
</c8y-stepper>