<div
  class="c8y-child-assets-selector"
  ng-style="vm.styleButton"
  is-open="vm.isDropDownOpen"
  on-toggle="vm.onToggleDropdown(open)"
  uib-dropdown
>
  <button
    type="button"
    class="btn dropdown-toggle c8y-dropdown"
    title="{{ vm.displayLabel ? vm.displayLabel : vm.placeholder() }}"
    uib-dropdown-toggle
    ng-disabled="vm.disabled"
    aria-haspopup="true"
    data-cy="c8y-item-selector--dropdown-toggle"
  >
    <span class="text-truncate" ng-bind="vm.displayLabel" ng-show="vm.displayLabel"></span>
    <span
      class="text-truncate text-muted"
      ng-hide="vm.displayLabel"
      ng-bind="vm.placeholder()"
    ></span>
  </button>

  <ul
    class="dropdown-menu multiselect-container"
    ng-click="$event.stopPropagation();"
    uib-dropdown-menu
    ng-style="vm.styleButton"
    ng-class="vm.dropdownMenuClasses"
  >
    <li class="multiselect-item sticky-top flex-wrap">
      <div class="input-group input-group-search p-b-8">
        <input
          type="search"
          class="form-control"
          placeholder="{{ 'Filter' | translate }}…"
          ng-model="vm.textFilter"
        />
        <span class="input-group-addon">
          <i c8y-icon="search" ng-show="vm.textFilter.length === 0 || !vm.textFilter"></i>
          <i
            c8y-icon="times"
            class="text-muted"
            ng-show="vm.textFilter.length > 0"
            ng-click="vm.textFilter = ''"
          ></i>
        </span>
      </div>
      <label
        title="{{ 'All' | translate }}"
        class="c8y-checkbox input-sm"
        ng-click="vm.toggleSelectAll(); $event.preventDefault()"
        data-cy="c8y-item-selector--select-all"
      >
        <input
          class="m-t-0"
          type="checkbox"
          ng-checked="vm.allSelected()"
          ng-click="::vm.toggleSelectAll(); $event.stopPropagation()"
        />
        <span></span>
        <span>{{ 'All' | translate }}</span>
      </label>
    </li>

    <li class="multiselect-item-container">
      <ul class="list-unstyled" ng-if="vm.isDropDownOpen">
        <li
          ng-repeat="item in vm.items | filter:vm.filterItems | orderBy:'nameLabel'"
          class="multiselect-item"
        >
          <label
            title="{{ item.nameLabel }}"
            class="c8y-checkbox input-sm text-truncate"
            ng-click="::vm.toggle(item); $event.preventDefault()"
            data-cy="c8y-item-selector--item"
          >
            <input
              class="m-t-0"
              type="checkbox"
              ng-checked="vm.isSelected(item)"
              ng-click="::vm.toggle(item); $event.stopPropagation()"
            />
            <span></span>
            <span class="label-text text-truncate" ng-bind="item.nameLabel"></span>
          </label>
        </li>
      </ul>
    </li>
    <li class="divider"></li>
    <li class="sticky-bottom">
      <button
        title="{{ vm.textApply }}"
        type="button"
        class="btn btn-primary btn-block"
        ng-click="::vm.apply()"
        ng-disabled="vm.applying"
        data-cy="c8y-item-selector--apply-button"
      >
        {{ vm.textApply }}
      </button>
    </li>
  </ul>
</div>
