<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]="searchTerm$ | async"
          (ngModelChange)="onSearchChange($event)"
          placeholder="{{ 'Type to filter icons…' | translate }}"
        />
        <ng-template #searchIcon>
          <span class="input-group-addon">
            <i c8yIcon="search"></i>
          </span>
        </ng-template>
        <span
          class="input-group-addon pointer"
          *ngIf="searchTerm$ | async; else searchIcon"
          (click)="onSearchChange('')"
        >
          <i c8yIcon="times"></i>
        </span>
      </div>
    </div>
    <div class="col-sm-6 m-b-8 text-right">
      <div class="d-inline-flex a-i-center text-left">
        <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$ | async"
            (ngModelChange)="onCategoryFilterChanged($event)"
          >
            <option *ngFor="let category of availableIconCategories$ | async" [ngValue]="category">
              {{ category | 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 filteredIcons$ | async" class="d-contents">
        <div class="legend form-block center grid__col--fullspan">
          {{ iconDefinition.label | translate }}
        </div>

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