<div class="fit-h">
  <c8y-stepper
    class="d-col no-align-items fit-h c8y-stepper--no-btns a-i-center"
    linear
    [disableDefaultIcons]="{ edit: true, done: false }"
    [customClasses]="['col-xs-10', 'col-sm-8', 'm-t-24', 'm-b-40', 'p-0', 'flex-no-shrink']"
    *ngIf="showStepper"
    c8yProductExperience
    [actionName]="BULK_OPERATION_EVENT"
    [actionData]="{ bulkOperationType: type }"
  >
    <!-- 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 fit-w sticky-bottom bg-level-0"
        *ngIf="showButtons"
        [disabled]="step.buttonsDisabled"
        (onNext)="step.onNext($event)"
        (onCancel)="cancel()"
      ></c8y-stepper-buttons>
    </cdk-step>
    <!-- STEP N-1 - Data-grid -->
    <cdk-step [label]="'Filter target devices' | translate">
      <div class="card-block p-b-0 p-t-0 flex-no-shrink separator-bottom col-xs-12">
        <div class="d-flex j-c-center p-b-8 p-t-4">
          <div class="col-xs-12 col-sm-6">
            <h4 class="text-center text-normal m-b-16">
              {{ 'Filter 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 fit-w sticky-bottom bg-level-0"
        *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 flex-no-shrink p-b-0 p-t-0 separator-bottom col-xs-12">
        <div class="d-flex j-c-center p-b-8 p-t-4">
          <div class="col-xs-12 col-sm-6">
            <h4 class="text-center text-normal 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="d-flex j-c-center p-t-8 p-b-8">
              <div class="col-xs-12 col-sm-6">
                <c8y-operation-summary
                  [name]="operationDetails?.name | translate"
                  [description]="operationDetails?.description | translate"
                  [deviceQueryString]="deviceQueryString"
                ></c8y-operation-summary>
              </div>
            </div>
            <div class="d-flex j-c-center">
              <div class="col-xs-12 col-sm-6">
                <c8y-create-bulk-operation-details
                  [bulkOperationType]="bulkOperationType"
                ></c8y-create-bulk-operation-details>
              </div>
            </div>
          </div>
        </div>
      </div>
      <c8y-stepper-buttons
        class="d-block card-footer p-24 separator fit-w sticky-bottom bg-level-0"
        *ngIf="showButtons"
        [labels]="stepperButtonsLabels"
        [pending]="pendingStatus"
        [disabled]="operationDetailsForm?.invalid"
        (onCancel)="cancel()"
        (onCustom)="scheduleBulkOperation()"
      ></c8y-stepper-buttons>
    </cdk-step>
  </c8y-stepper>
</div>