<li class="list-group-item text-truncate">
  <label class="c8y-checkbox checkbox-inline">
    <input
      type="checkbox"
      id="deviceTitle"
      ng-checked="isSelected(device) || isDisabled(device)"
      ng-click="onDeviceSelect(device)"
      ng-disabled="isDisabled(device)"
    />
    <span></span>
    <span for="deviceTitle" class="sr-only" translate>Send measurement</span>
  </label>

  <span
    title="{{ getDeviceTitle(device) }}"
    ng-class="{ interact: getChildrenCount(device) > 0 }"
    ng-click="collapseExpandChildren(device)"
  >
    {{ getDeviceTitle(device) }}
    <small
      class="text-muted"
      ng-show="getChildrenCount(device) > 0"
      translate
      translate-n="getChildrenCount(device)"
      translate-plural="({{ $count }} children)"
    >
      (1 child)
    </small>
    <i
      class="icon-spin loadingIndicator"
      c8y-icon="circle-o-notch"
      ng-show="device.__loading"
      style="color: #999"
    ></i>
  </span>
  <ul class="p-0 list-unstyled" style="margin: 0 0 -11px 0">
    <c8y-device-selector-list
      ng-repeat="child in device.children | orderBy:'name'"
      selected-devices="selectedDevices"
      disabled-devices="disabledDevices"
      device="child"
    ></c8y-device-selector-list>
  </ul>
</li>
