<c8y-bulk-operation-stepper>
  <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 filters class="row">
        <div class="col-md-6">
          <div class="input-group input-group-search">
            <input
              type="search"
              class="form-control"
              title="{{ 'Filter…' | translate }}"
              placeholder="{{ 'Filter…' | translate }}"
              [ngModel]="textFilter$ | async"
              (ngModelChange)="textFilter$.next($event)"
            />
            <span class="input-group-addon">
              <i c8yIcon="filter" *ngIf="(textFilter$ | async).length === 0"></i>
              <i
                c8yIcon="times"
                class="text-muted"
                *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
              name="configType"
              [(ngModel)]="selectedConfigType"
              placeholder="{{ 'Type to filter configuration types…' | translate }}"
              (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
                *ngFor="let configType of configTypes"
                class="p-l-8 p-r-8 c8y-list__item--link"
                (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 header class="hidden-sm hidden-xs m-r-8 m-l-8">
        <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
        [ngClass]="{ 'dd-low': (configurations$ | async)?.data?.length < DD_LOW_COUNT }"
      >
        <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 translate class="text-label-small m-r-8 visible-xs visible-sm"
                  >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"
                *ngIf="configuration.configurationType"
                title="{{ 'Configuration type' | translate }}: {{
                  configuration.configurationType
                }}"
              >
                <c8y-highlight
                  [text]="configuration.configurationType"
                  elementClass="text-gray-lighter"
                  [pattern]="configType$ | async"
                ></c8y-highlight>
              </span>
              <span
                class="label label-default"
                *ngIf="!configuration.configurationType"
                title="{{ 'Configuration type' | translate }}: {{ 'Undefined' | translate }}"
              >
                {{ '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">
        <div
          class="c8y-empty-state text-left"
          *ngIf="!this.selectedConfiguration?.binary; else binaryPreview"
        >
          <h1 [c8yIcon]="'file-code-o'"></h1>
          <p>
            <strong translate>No preview available.</strong><br />
            <small translate>Could not fetch the file.</small>
          </p>
        </div>
        <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>