<div
  class="c8y-child-assets-selector"
  is-open="ctrl.dropdownStatus.open"
  uib-dropdown
>
  <button
    type="button"
    class="btn dropdown-toggle c8y-dropdown"
    title="{{ ctrl.getSelectedText() }}"
    uib-dropdown-toggle
    aria-haspopup="true"
  >
    <span class="text-truncate">
      <i
        c8y-icon="check"
        ng-class="{ 'text-success': ctrl.areAllOriginallySelected() }"
      ></i>
      <span ng-bind="ctrl.getSelectedStatusText()"></span>
    </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
          class="form-control"
          type="search"
          placeholder="{{ 'Type to filter' | translate }}…"
          ng-model="ctrl.filterCfg.text"
        />
        <span class="input-group-addon">
          <i c8y-icon="search"></i>
        </span>
      </div>
    </li>
    <li class="multiselect-item">
      <label
        title="{{ 'Activate all visible`children`' | translate }}"
        ng-if="!ctrl.allVisibleSelected"
        class="c8y-checkbox input-sm"
        ng-click="ctrl.selectAllVisible()"
      >
        <input
          type="checkbox"
          ng-checked="false"
          ng-click="ctrl.selectAllVisible(); $event.stopPropagation();"
          class="m-t-0"
        />
        <span></span>
        <span>{{ 'Activate all visible`children`' | translate }}</span>
      </label>
      <label
        title="{{ 'Deactivate all visible`children`' | translate }}"
        ng-if="ctrl.allVisibleSelected"
        class="c8y-checkbox input-sm"
        ng-click="ctrl.deselectAllVisible()"
      >
        <input
          type="checkbox"
          ng-checked="true"
          ng-click="ctrl.deselectAllVisible(); $event.stopPropagation();"
          class="m-t-0"
        />
        <span></span>
        <span>{{ 'Deactivate all visible`children`' | translate }}</span>
      </label>
    </li>
    <li class="divider"></li>
    <li class="multiselect-item-container">
      <div
        ng-if="!(ctrl.dropdownStatus.open && ctrl.dropdownOpeningFinished)"
        class="text-center p-8"
      >
        <i
          c8y-icon="circle-o-notch"
          class="icon-spin"
        ></i>
        <span>{{ 'Loading' | translate }}…</span>
      </div>
      <ul
        class="list-unstyled"
        ng-if="ctrl.dropdownStatus.open && ctrl.dropdownOpeningFinished"
      >
        <li
          ng-repeat="childAsset in ctrl.childAssets | filter:ctrl.filterCfg.text"
          class="multiselect-item"
        >
          <label
            class="c8y-checkbox input-sm text-truncate"
            ng-click="ctrl.toggle(childAsset); $event.preventDefault()"
          >
            <input
              type="checkbox"
              ng-checked="ctrl.isSelected(childAsset)"
              ng-click="ctrl.toggle(childAsset); $event.stopPropagation()"
              class="m-t-0"
            />
            <span></span>
            <span
              class="label-text"
              title="{{ childAsset.name }}"
              ng-bind="childAsset.name"
            ></span>
          </label>
        </li>
      </ul>
    </li>
    <li class="divider"></li>
    <li>
      <button
        title="{{ 'Apply' | translate }}"
        class="btn btn-primary btn-block"
        ng-click="ctrl.apply()"
      >
        {{ 'Apply' | translate }}
      </button>
    </li>
  </ul>
</div>
