<c8y-bulk-operation-stepper [type]="type">
  <ng-container
    *customStep="
      'Select configuration' | translate;
      completed: !!selectedConfiguration;
      buttonsDisabled: !selectedConfiguration;
      onNext: goToSecondStep.bind(this)
    "
  >
    <c8y-select-step-frame
      [header]="'Select configuration' | translate"
      [noResults]="
        ((textFilter$ | async)?.length || (configType$ | async)?.length) &&
        (configurations$ | async)?.data.length === 0
      "
    >
      <div
        class="row"
        filters
      >
        <div class="col-md-6">
          <div class="input-group input-group-search">
            <input
              class="form-control"
              title="{{ 'Filter…' | translate }}"
              placeholder="{{ 'Filter…' | translate }}"
              type="search"
              [ngModel]="textFilter$ | async"
              (ngModelChange)="textFilter$.next($event)"
            />
            <span class="input-group-addon">
              <i
                c8yIcon="search"
                *ngIf="(textFilter$ | async).length === 0"
              ></i>
              <i
                class="text-muted"
                c8yIcon="times"
                *ngIf="(textFilter$ | async).length > 0"
                (click)="textFilter$.next('')"
              ></i>
            </span>
          </div>
        </div>
        <div class="col-xs-12 p-b-8 visible-xs visible-sm"></div>
        <div class="col-md-6">
          <c8y-form-group class="m-0">
            <c8y-typeahead
              placeholder="{{ 'Type to filter configuration types…' | translate }}"
              name="configType"
              [(ngModel)]="selectedConfigType"
              (onSearch)="configType$.next($event)"
            >
              <c8y-li
                class="p-l-8 p-r-8 c8y-list__item--link"
                (click)="selectedConfigType = { name: '' }; configType$.next('')"
              >
                <span>{{ 'All configuration types' | translate }}</span>
              </c8y-li>
              <c8y-li
                class="p-l-8 p-r-8 c8y-list__item--link"
                *ngFor="let configType of configTypes"
                (click)="selectedConfigType = configType; configType$.next(configType.name)"
                [active]="selectedConfigType === configType"
              >
                <c8y-highlight
                  [text]="configType.name"
                  [pattern]="configType$ | async"
                ></c8y-highlight>
              </c8y-li>
            </c8y-typeahead>
          </c8y-form-group>
        </div>
      </div>
      <c8y-li
        class="hidden-sm hidden-xs m-r-8 m-l-8"
        header
      >
        <c8y-li-icon><i class="p-l-32 p-r-40"></i></c8y-li-icon>
        <c8y-li-body class="content-flex-40">
          <div class="col-5">
            <span
              class="text-truncate"
              title=" {{ 'Name' | translate }} "
            >
              {{ 'Name' | translate }}
            </span>
          </div>
          <div class="col-4">
            <span
              class="text-truncate"
              title="{{ 'Device type' | translate }}"
            >
              {{ 'Device type' | translate }}
            </span>
          </div>
          <div class="col-3">
            <span
              class="text-truncate"
              title="{{ 'Configuration type' | translate }}"
            >
              {{ 'Configuration type' | translate }}
            </span>
          </div>
        </c8y-li-body>
      </c8y-li>
      <c8y-list-group list>
        <c8y-li
          #listItem
          *c8yFor="let configuration of configurations$ | async"
        >
          <c8y-li-radio (onSelect)="selectConfiguration(configuration)"></c8y-li-radio>
          <c8y-li-icon icon="gears"></c8y-li-icon>
          <c8y-li-body class="content-flex-40">
            <div class="col-5 m-b-xs-8">
              <div
                class="text-truncate"
                title="{{ configuration.name || '-' }}"
              >
                <c8y-highlight
                  [text]="configuration.name || '-'"
                  [pattern]="textFilter$ | async"
                ></c8y-highlight>
              </div>
            </div>
            <div class="col-4 m-b-xs-8">
              <div
                class="text-truncate"
                title="{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(configuration) }}"
              >
                <span
                  class="text-label-small m-r-8 visible-xs visible-sm"
                  translate
                >
                  Device type
                </span>
                {{ configuration.deviceType }}
                <em
                  class="text-muted"
                  *ngIf="!configuration.deviceType"
                >
                  {{ 'Undefined`device type`' | translate }}
                </em>
              </div>
            </div>
            <div class="col-3 m-b-xs-8">
              <span
                class="text-label-small m-r-8 visible-xs visible-sm"
                translate
              >
                Configuration type
              </span>
              <span
                class="label label-info"
                title="{{ 'Configuration type' | translate }}: {{
                  configuration.configurationType
                }}"
                *ngIf="configuration.configurationType"
              >
                <c8y-highlight
                  [text]="configuration.configurationType"
                  elementClass="text-gray-lighter"
                  [pattern]="configType$ | async"
                ></c8y-highlight>
              </span>
              <span
                class="label label-default"
                title="{{ 'Configuration type' | translate }}: {{ 'Undefined' | translate }}"
                *ngIf="!configuration.configurationType"
              >
                {{ 'Undefined' | translate }}
              </span>
            </div>
          </c8y-li-body>
        </c8y-li>
      </c8y-list-group>
    </c8y-select-step-frame>
  </ng-container>
  <ng-container *customStep="'Preview configuration' | translate">
    <c8y-preview-selection-frame
      [header]="'Preview configuration' | translate"
      [name]="selectedConfiguration?.name"
      [type]="selectedConfiguration?.configurationType"
    >
      <ng-container *previewBlock="'Device type' | translate">
        <ng-container *ngIf="selectedConfiguration?.deviceType; else noType">
          <span>{{ selectedConfiguration?.deviceType }}</span>
        </ng-container>
        <ng-template #noType>
          <em
            class="text-muted"
            translate
          >
            Undefined`device type`
          </em>
        </ng-template>
      </ng-container>
      <ng-container *previewBlock="'Updated' | translate">
        <span>{{ selectedConfiguration?.lastUpdated | c8yDate }}</span>
      </ng-container>
      <ng-container *previewBlock="'Preview' | translate">
        <c8y-ui-empty-state
          [icon]="'file-code-o'"
          [title]="'No preview available.' | translate"
          [subtitle]="'Could not fetch the file.' | translate"
          *ngIf="!this.selectedConfiguration?.binary; else binaryPreview"
        ></c8y-ui-empty-state>
        <ng-template #binaryPreview>
          <pre style="min-height: 98px"><code>{{ this.selectedConfiguration?.binary }}</code></pre>
        </ng-template>
      </ng-container>
    </c8y-preview-selection-frame>
  </ng-container>
</c8y-bulk-operation-stepper>