<c8y-select-step-frame
  [header]="'Select device profile' | translate"
  [noResults]="
    ((textFilter$ | async)?.length || (deviceType$ | async)?.length) &&
    (deviceProfile$ | async)?.data.length === 0
  "
>
  <div filters class="row">
    <div class="col-md-6 m-b-xs-8 m-b-sm-8">
      <div class="input-group input-group-search">
        <input
          type="search"
          class="form-control"
          title="{{ 'Filter device profiles…' | translate }}"
          placeholder="{{ 'Filter device profiles…' | 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"
            (click)="textFilter$.next('')"
          ></i>
        </span>
      </div>
    </div>
    <div class="col-md-6 m-b-xs-8 m-b-sm-8">
      <c8y-form-group class="m-0">
        <c8y-typeahead
          name="deviceType"
          [(ngModel)]="selectedDeviceType"
          placeholder="{{ 'Type to filter device types…' | translate }}"
          (onSearch)="deviceType$.next($event)"
          [allowFreeEntries]="false"
        >
          <c8y-li
            class="p-l-8 p-r-8 c8y-list__item--link"
            (click)="selectedDeviceType = { name: '' }; deviceType$.next('')"
          >
            <span>{{ 'All device types' | translate }}</span>
          </c8y-li>
          <c8y-li
            *ngFor="let deviceType of deviceTypes"
            class="p-l-8 p-r-8 c8y-list__item--link"
            (click)="selectedDeviceType = deviceType; deviceType$.next(deviceType.name)"
            [active]="selectedDeviceType === deviceType"
          >
            <c8y-highlight [text]="deviceType.name" [pattern]="deviceType$ | async"></c8y-highlight>
          </c8y-li>
        </c8y-typeahead>
        <c8y-messages
          ><c8y-message
            name="notExisting"
            [text]="'Select one of the existing device types.' | translate"
          ></c8y-message>
        </c8y-messages>
      </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-3">
        <span class="text-truncate" title="{{ 'Device type' | translate }}">
          {{ 'Device type' | translate }}
        </span>
      </div>
    </c8y-li-body>
  </c8y-li>
  <c8y-list-group list [ngClass]="{ 'dd-low': (deviceProfile$ | async)?.data.length < 10 }">
    <c8y-li *c8yFor="let deviceProfile of deviceProfile$ | async; loadMore: 'auto'">
      <c8y-li-radio (onSelect)="selectDeviceProfile(deviceProfile)"></c8y-li-radio>
      <c8y-li-icon>
        <i c8yIcon="c8y-device-profile"></i>
      </c8y-li-icon>
      <c8y-li-body class="content-flex-40">
        <div class="col-5 m-b-xs-8">
          <div class="text-truncate" title="{{ deviceProfile.name }}">
            {{ deviceProfile.name }}
          </div>
        </div>
        <div class="col-3 m-b-xs-8">
          <div
            class="text-truncate"
            title="{{ 'Device type' | translate }}: {{ getDeviceTypeTitle(deviceProfile) }}"
          >
            <span class="text-label-small m-r-8 visible-xs visible-sm" translate>
              Device type
            </span>
            <span *ngIf="deviceProfile.c8y_Filter?.type; else noType">
              {{ deviceProfile.c8y_Filter?.type }}
            </span>
            <ng-template #noType>
              <small><em class="text-muted" translate>Undefined`device type`</em></small>
            </ng-template>
          </div>
        </div>
      </c8y-li-body>
    </c8y-li>
  </c8y-list-group>
</c8y-select-step-frame>