<div class="p-l-16 m-b-8" *ngIf="isFilterEnabled">
  <c8y-filter [icon]="'search'" (onSearch)="updatePipe($event)"></c8y-filter>
</div>

<!-- EMPTY STATE -->
<div class="c8y-empty-state text-left" *ngIf="items?.length === 0">
  <h1 [c8yIcon]="emptyState.icon"></h1>
  <p>
    <strong>{{ emptyState.title | translate }}</strong
    ><br />
    <small>{{ emptyState.text | translate }}</small>
  </p>
</div>

<!-- CONFIGURATIONS AVAILABLE -->
<div class="c8y-nav-stacked">
  <div
    class="c8y-stacked-item flex-row"
    [class.active]="config === selectedConfig"
    *ngFor="let config of items | configurationFilterPipe: filterTerm"
    (click)="showConfigurationTypePreview(config)"
  >
    <div class="list-item-icon">
      <i [c8yIcon]="itemIcon"></i>
    </div>
    <div class="list-item-body text-truncate">
      <div class="d-flex">
        <span class="text-truncate" title="{{ config.name }}">{{ config.name }}</span>
        <span class="text-label-small flex-item-right flex-item-middle">{{ config.deviceType }}</span>
      </div>
    </div>
  </div>
</div>

<!-- for Carlos: config.configurationType to differentiate whether a config matches configuration type. -->