<div
  class="c8y-child-assets-selector"
  ng-class="{ open: vm.isDropDownOpen }"
  is-open="vm.isDropDownOpen"
  on-toggle="vm.onToggleDropdown(open)"
  uib-dropdown
  dropdown-append-to-body="true"
>
  <button
    class="btn dropdown-toggle c8y-dropdown"
    title="{{ vm.displayTextAssigned() || 'Select inventory roles' | translate }}"
    aria-haspopup="true"
    type="button"
    uib-dropdown-toggle
    ng-disabled="vm.disableEditForExternalUsers"
  >
    <span class="text-truncate">
      <span class="text-muted">
        {{ vm.displayTextInherited() }}
      </span>
      <span ng-show="vm.displayTextInherited() && vm.displayTextAssigned()">/</span>
      <span>{{ vm.displayTextAssigned() }}</span>
      <em
        class="text-muted"
        ng-hide="vm.displayTextInherited() || vm.displayTextAssigned()"
        translate
      >
        Select inventory roles…
      </em>
    </span>
  </button>

  <ul
    class="dropdown-menu multiselect-container"
    ng-click="$event.stopPropagation();"
    uib-dropdown-menu
  >
    <li class="multiselect-item sticky-top">
      <div
        class="input-group input-group-search input-group-sm"
        title="{{ 'Filter inventory roles' | translate }}"
      >
        <input
          class="form-control"
          placeholder="{{ 'Filter inventory roles' | translate }}…"
          type="search"
          ng-model="vm.roleTextFilter"
        />
        <span class="input-group-addon">
          <i
            ng-class="{ 'icon-spin': loading }"
            c8y-icon="search"
            ng-show="vm.roleTextFilter.length === 0 || !vm.roleTextFilter"
          ></i>
          <button
            class="btn-clean"
            title="{{ 'Clear`filters`' | translate }}"
            ng-show="vm.roleTextFilter.length > 0"
            ng-click="vm.roleTextFilter = ''"
          >
            <i
              class="text-muted"
              c8y-icon="times"
            ></i>
          </button>
        </span>
      </div>
    </li>

    <li
      class="multiselect-item"
      ng-if="vm.isDropDownOpen"
    >
      <label
        class="c8y-checkbox input-sm text-truncate"
        title="{{ 'All' | translate }}"
        ng-click="vm.toggleSelectAll(); $event.preventDefault()"
      >
        <input
          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
          class="multiselect-item"
          ng-repeat="role in vm.inventoryRoles | filter:vm.isAllowedByOwner | filter:vm.roleTextFilter | orderBy:vm.translateName"
        >
          <label
            class="c8y-checkbox input-sm text-truncate flex-grow"
            title="{{ ::role.name | translate }}"
            ng-click="::vm.toggle(role); $event.preventDefault()"
          >
            <input
              class="m-t-0"
              type="checkbox"
              ng-disabled="vm.isInherited(role)"
              ng-checked="vm.isSelected(role)"
              ng-click="::vm.toggle(role); $event.stopPropagation()"
            />
            <span></span>
            <span class="label-text text-truncate">
              {{::role.name | translate}}
            </span>
          </label>
          <button
            class="btn-help btn-help--sm"
            popover-class="high-popover"
            aria-label="{{ 'Help' | translate }}"
            type="button"
            uib-popover-html="vm.getFormattedInventoryRoleDescription(role.description)"
            popover-trigger="'focus'"
            popover-placement="right"
            popover-append-to-body="true"
            ng-show="::role.description"
          ></button>
          <button
            class="text-warning btn-clean"
            aria-label="{{::'This role is already assigned to a parent asset.' | translate}}"
            type="button"
            uib-popover="{{::'This role is already assigned to a parent asset.' | translate}}"
            popover-trigger="'focus'"
            popover-placement="right"
            popover-append-to-body="true"
            ng-show="::vm.isInherited(role)"
          >
            <i c8y-icon="warning"></i>
          </button>
        </li>
      </ul>
    </li>
    <li class="divider"></li>
    <li class="bg-level-0">
      <button
        class="btn btn-primary btn-block"
        title="{{ 'Apply' | translate }}"
        type="button"
        ng-click="::vm.apply()"
        ng-disabled="vm.isUnchanged"
      >
        {{ 'Apply' | translate }}
      </button>
    </li>
  </ul>
</div>
