<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
          class="form-control"
          id="filter-icons"
          placeholder="{{ 'Type to filter icons…' | translate }}"
          type="search"
          [ngModel]="searchTerm$ | async"
          (ngModelChange)="onSearchChange($event)"
        />
        @if (searchTerm$ | async) {
          <span
            class="input-group-addon pointer"
            (click)="onSearchChange('')"
          >
            <i c8yIcon="times"></i>
          </span>
        } @else {
          <span class="input-group-addon">
            <i c8yIcon="search"></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
            class="form-control"
            id="exampleSelect"
            [ngModel]="selectedIconCategory$ | async"
            (ngModelChange)="onCategoryFilterChanged($event)"
          >
            @for (category of availableIconCategories$ | async; track category) {
              <option [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">
      @for (iconDefinition of filteredIcons$ | async; track iconDefinition) {
        <div class="d-contents">
          <div class="legend form-block center grid__col--fullspan">
            {{ iconDefinition.label | translate }}
          </div>

          @for (icon of iconDefinition.icons; track icon) {
            <div class="d-contents">
              <div
                class="dtm-icon-grid__item"
                [ngClass]="{
                  'dtm-icon-grid__item--selected': selectedIcon && icon[0] === selectedIcon
                }"
              >
                <button
                  class="dtm-icon-grid__btn"
                  [title]="icon[0] | iconName"
                  (click)="onIconClicked(icon)"
                >
                  <i
                    class="d-block icon-40 c8y-icon-duocolor"
                    [c8yIcon]="icon[0]"
                  ></i>
                  @if (showIconClass) {
                    <small class="text-break-word">
                      {{ icon[0] | iconName }}
                    </small>
                  }
                </button>
              </div>
            </div>
          }
        </div>
      } @empty {
        <c8y-ui-empty-state
          icon="search"
          style="grid-column: 1 / 3"
          [title]="'No icons found' | translate"
          [subtitle]="
            'Try adjusting your search or filter to find what you\'re looking for.' | translate
          "
          [horizontal]="true"
        ></c8y-ui-empty-state>
      }
    </div>
  </div>
</div>