<div class="fit-h">
  <c8y-stepper
    class="flex-col no-align-items fit-h c8y-stepper--no-btns"
    linear
    [disableDefaultIcons]="{ edit: true, done: false }"
    [customClasses]="['col-md-6', 'col-md-offset-3', 'p-t-16', 'p-b-32', 'flex-no-shrink']"
    *ngIf="showStepper"
  >
    <!-- CUSTOM STEPS 1 to N-2 -->
    <cdk-step
      *ngFor="let step of steps"
      [label]="step.label | translate"
      [completed]="step.completed"
    >
      <ng-container *ngTemplateOutlet="step.templateRef"></ng-container>
      <c8y-stepper-buttons
        class="d-block card-footer p-24 separator"
        *ngIf="showButtons"
        [disabled]="step.buttonsDisabled"
        (onNext)="step.onNext($event)"
        (onCancel)="cancel()"
      ></c8y-stepper-buttons>
    </cdk-step>
    <!-- STEP N-1 - Data-grid -->
    <cdk-step [label]="'Select target devices' | translate">
      <div class="card-block p-t-0 flex-no-shrink separator-bottom col-xs-12">
        <div class="row p-b-16">
          <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
            <h4 class="text-center m-b-16">
              {{ 'Select target devices' | translate }}
            </h4>
          </div>
        </div>
      </div>

      <div class="col-xs-12 flex-grow no-gutter">
        <c8y-device-selector
          [deviceTypes]="deviceTypes$"
          (onDeviceQueryStringChange)="deviceQueryString = $event"
        ></c8y-device-selector>
      </div>
      <c8y-stepper-buttons
        class="d-block card-footer p-24 separator"
        *ngIf="showButtons"
        (onNext)="confirmDeviceSelection($event)"
        (onCancel)="cancel()"
      ></c8y-stepper-buttons>
    </cdk-step>

    <!-- STEP N - Scheduler -->
    <cdk-step [label]="'Confirm and schedule bulk operation' | translate">
      <div class="card-block p-t-0 flex-no-shrink separator-bottom col-xs-12">
        <div class="row p-b-16">
          <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
            <h4 class="text-center m-b-16">
              {{ 'Confirm and schedule bulk operation' | translate }}
            </h4>
          </div>
        </div>
      </div>

      <div class="col-xs-12 flex-grow no-gutter">
        <div class="card-inner-scroll fit-h">
          <div class="card-block p-b-0">
            <div class="text-center p-b-16">
              <c8y-operation-summary
                [name]="operationDetails?.name | translate"
                [description]="operationDetails?.description | translate"
                [deviceQueryString]="deviceQueryString"
              ></c8y-operation-summary>
            </div>
            <div class="row">
              <div class="col-md-4 col-md-offset-4">
                <c8y-operation-details
                  [bulkOperationType]="bulkOperationType"
                ></c8y-operation-details>
              </div>
            </div>
          </div>
        </div>
      </div>
      <c8y-stepper-buttons
        class="d-block card-footer p-24 separator"
        *ngIf="showButtons"
        [labels]="stepperButtonsLabels"
        [pending]="pendingStatus"
        [disabled]="operationDetailsForm?.invalid"
        (onCancel)="cancel()"
        (onCustom)="scheduleBulkOperation()"
      >
      </c8y-stepper-buttons>
    </cdk-step>
  </c8y-stepper>
</div>