<div class="p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom">
  <div class="row d-flex-sm">
    <div class="col-sm-6 m-b-8">
      <div class="input-group-search input-group" style="width: auto">
        <input
          type="search"
          class="form-control"
          id="filter-icons"
          [(ngModel)]="quickSearch"
          placeholder="{{ 'Type to filter icons…' | translate }}"
        />
        <span class="input-group-addon" *ngIf="!quickSearch || quickSearch.length === 0">
          <i c8yIcon="search"></i>
        </span>
        <span
          class="input-group-addon pointer"
          *ngIf="quickSearch && quickSearch.length > 0"
          (click)="quickSearch = ''"
        >
          <i c8yIcon="times"></i>
        </span>
      </div>
    </div>
    <div class="col-sm-6 m-b-8">
      <div class="d-flex a-i-center">
        <label class="m-b-0 m-r-8 flex-no-shrink" translate>Filter by type</label>
        <div class="c8y-select-wrapper">
          <select
            id="exampleSelect"
            class="form-control"
            [(ngModel)]="selectedIconCategory"
            (change)="onCategoryFilterChanged()"
          >
            <option *ngFor="let category of iconCategories" [ngValue]="category">
              {{ category.displayName | translate }}
            </option>
          </select>
          <span></span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal-inner-scroll">
  <div class="modal-body" style="height: calc(100vh - 293px)">
    <div class="dtm-icon-grid">
      <div *ngFor="let iconDefinition of icons | keyvalue" class="d-contents">
        <div *ngIf="!quickSearch" class="legend form-block center grid__col--fullspan">
          {{ iconDefinition.value.label | translate }}
        </div>

        <div class="d-contents" *ngFor="let icon of iconDefinition.value.icons">
          <div
            class="dtm-icon-grid__item"
            [ngClass]="{
              'dtm-icon-grid__item--selected': selectedIcon && icon === selectedIcon
            }"
            *ngIf="!quickSearch || quickSearch.length === 0 || icon.indexOf(quickSearch) > -1"
          >
            <button (click)="onIconClicked(icon)" class="dtm-icon-grid__btn" [title]="icon">
              <i [c8yIcon]="icon" class="d-block icon-40"></i>
              <small *ngIf="showIconClass" class="text-break-word">{{ icon }}</small>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>