<div
  class="dropdown fit-w"
  container="{{ addDropdownContainerToBody ? 'body' : null }}"
  (isOpenChange)="isOpenChange($event)"
  dropdown
  #dropdown="bs-dropdown"
  c8yDropdownDirection
  px-event="Select type"
  [insideClick]="true"
>
  <div class="input-group dropdown-toggle">
    <div
      class="form-control pointer d-flex inner-scroll"
      (click)="dropdown.isOpen = !dropdown.isOpen"
    >
      <ng-container *ngIf="itemsSelected.size !== items.length; else all">
        <em
          class="text-muted"
          *ngIf="itemsSelected.size === 0"
        >
          {{ placeholder | translate }}
        </em>
        <span
          class="tag tag--info chip"
          *ngFor="let selectedItem of itemsSelected"
        >
          <button
            class="btn btn-xs btn-clean text-10"
            title="{{ 'Remove' | translate }}"
            type="button"
            (click)="deselectItem(selectedItem); $event.stopPropagation()"
          >
            <i [c8yIcon]="'times'"></i>
          </button>
          {{ selectedItem.name | nameTransform | translate }}
        </span>
      </ng-container>
      <ng-template #all>
        {{ 'All`possible options`' | translate }}
      </ng-template>
    </div>
    <div class="input-group-btn">
      <button
        class="btn btn-default d-flex a-i-center w-auto"
        title="{{ labelText || placeholder | translate }}"
        aria-haspopup="true"
        dropdownToggle
      >
        <i class="c8y-glyph-caret icon-16"></i>
      </button>
    </div>
  </div>

  <ul
    class="dropdown-menu multiselect-container"
    *dropdownMenu
  >
    <ng-content select="c8y-li"></ng-content>
    <ng-container *ngIf="liChildren.length === 0">
      <li
        class="multiselect-item sticky-top"
        *ngIf="items.length > sizeToShowFilter"
      >
        <div class="input-group input-group-search">
          <input
            class="form-control"
            placeholder="{{ 'Filter' | translate }}…"
            type="search"
            (keyup)="updateFiltered($event.target.value)"
            [(ngModel)]="searchFilter"
          />
          <span class="input-group-addon">
            <i
              c8yIcon="search"
              *ngIf="!textFilter"
            ></i>
            <i
              class="text-muted"
              c8yIcon="times"
              *ngIf="textFilter"
              (click)="textFilter = ''"
            ></i>
          </span>
        </div>
      </li>

      <li class="multiselect-item">
        <label
          class="c8y-checkbox input-sm"
          [title]="getSelectAllToggleStatus().label | translate"
          ng-click="vm.toggleSelectAll(); $event.preventDefault()"
        >
          <input
            class="m-t-0"
            type="checkbox"
            [checked]="getSelectAllToggleStatus().checked"
            (change)="selectAll($event.target.checked)"
            [indeterminate]="getSelectAllToggleStatus().indeterminate"
          />
          <span></span>
          <span class="label-text">
            {{ getSelectAllToggleStatus().label | translate }}
          </span>
        </label>
      </li>

      <li
        class="multiselect-item"
        *ngFor="let item of filteredItems"
      >
        <label
          class="c8y-checkbox d-flex a-i-center"
          [title]="item.name | nameTransform | translate"
        >
          <input
            type="checkbox"
            [checked]="isSelected(item)"
            (change)="onChangeItem($event.target.checked, item)"
          />
          <span></span>
          <span class="m-l-8">{{ item.name | nameTransform | translate }}</span>
        </label>
      </li>
      <li class="divider"></li>
      <li class="sticky-bottom bg-level-0">
        <button
          class="btn btn-primary btn-block"
          title="{{ applyLabel | translate }}"
          [disabled]="disableApplyOnNoSelection && isNoItemSelected()"
          (click)="applyChanges()"
        >
          {{ applyLabel | translate }}
        </button>
      </li>
    </ng-container>
  </ul>
</div>