<c8y-bulk-operation-stepper>
  <ng-container
    *customStep="
      'Select configuration' | translate;
      completed: !!selectedConfiguration;
      buttonsDisabled: !selectedConfiguration;
      onNext: goToSecondStep.bind(this)"
  >
    <div class="card-block p-t-0 overflow-visible flex-no-shrink separator-bottom col-xs-12">
      <div class="row p-b-16">
        <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
          <h4 class="text-center m-b-16">{{ 'Select configuration' | translate }}</h4>
          <div 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>
        </div>
      </div>
    </div>
    <div class="col-xs-12 flex-grow no-gutter">
      <div class="card-inner-scroll fit-h">
        <div class="card-block p-t-0 p-b-0">
          <c8y-list-group [ngClass]="{ 'dd-low': elementCount < 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-60">
                <div class="col-5">
                  <div class="text-truncate" title="{{ configuration.name || '-' }}">
                    <c8y-highlight
                      [text]="configuration.name || '-'"
                      [pattern]="textFilter$ | async"
                    ></c8y-highlight>
                  </div>
                </div>
                <div class="col-4">
                  <div
                    class="text-truncate"
                    title="{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(configuration) }}"
                  >
                    <span translate class="text-label-small m-r-4">Device type</span>
                    {{ configuration.deviceType }}
                    <em class="text-muted" *ngIf="!configuration.deviceType">
                      {{ 'Undefined`device type`' | translate }}
                    </em>
                  </div>
                </div>
                <div class="col-3">
                  <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>
        </div>
      </div>
    </div>
  </ng-container>
  <ng-container *customStep="'Preview configuration' | translate">
    <div class="d-contents">
      <div class="card-block p-t-0 flex-no-shrink separator-bottom">
        <div class="row">
          <div class="col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
            <h4 class="text-center m-b-16">
              {{ 'Preview configuration' | translate }}
            </h4>
            <div class="row no-gutter">
              <div class="col-xs-6">
                <div class="text-right text-truncate" title="{{ selectedConfiguration?.name }}">
                  <strong>{{ selectedConfiguration?.name }}</strong>
                </div>
                <span class="label label-primary" *ngIf="selectedConfiguration?.configurationType">
                  {{ selectedConfiguration.configurationType }}
                </span>
                <span class="label label-default" *ngIf="!selectedConfiguration?.configurationType">
                  {{ 'Undefined' | translate }}
                </span>
              </div>
              <div class="col-xs-6 text-right">
                <div class="text-truncate" title="{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(selectedConfiguration) }}">
                  <span translate class="text-label-small m-r-4">
                    Device type
                  </span>
                  {{ selectedConfiguration?.deviceType }}
                  <em class="text-muted" *ngIf="!selectedConfiguration?.deviceType" translate>
                    Undefined`device type`
                  </em>
                </div>
                <p>
                  <span translate class="text-label-small m-r-4">Updated</span>
                  <small>{{ selectedConfiguration?.lastUpdated | c8yDate }}</small>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 flex-grow no-gutter">
        <div class="card-inner-scroll fit-h">
          <div class="card-block p-t-0">
            <div class="row">
              <div class="col-md-8 col-md-offset-2">
                <div class="legend form-block" translate>Preview</div>
                <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>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-container>
</c8y-bulk-operation-stepper>