<div ng-form="deviceSelectorForm" class="deviceSelectorCombo">
  <div ng-show="top && !parent" class="m-b-16">
    <div class="searchForm">
      <div class="input-group input-group-search">
        <input
          type="search"
          ng-required="isDeviceSelected()"
          class="form-control"
          placeholder="{{ placeholder | translate }}"
          ng-model="searchData.text"
          ng-keyup="checkEnter($event)"
        />
        <span class="input-group-btn">
          <button
            title="{{ 'Select' | translate }}"
            class="btn btn-clean text-primary"
            type="button"
            ng-click="search(searchData.text)"
            ng-disabled="loading"
            aria-label="loading"
          >
            <i c8y-icon="{{ icon() }}" ng-class="{ 'icon-spin': loading }"></i>
          </button>
        </span>
      </div>
    </div>
  </div>

  <div
    ng-show="!parent && children.length === 0 && !loading"
    class="card c8y-empty-state text-left no-results m-t-8 p-8"
  >
    <h1 c8y-icon="search"></h1>
    <p ng-if="searchData.lastText">
      <strong translate>No assets or devices found for "{{ searchData.lastText }}".</strong>
      <span translate>Refine your search.</span>
    </p>
    <p ng-if="!searchData.lastText">
      <strong translate>No assets or devices found.</strong>
      <span translate>Refine your search.</span>
    </p>
  </div>

  <div ng-show="top && parent" class="parent">
    <div class="alert alert-info" ng-show="readOnly">
      {{ readOnlyInfoText | translate }}
    </div>
    <button
      ng-disabled="readOnly"
      class="btn-clean btn"
      title="{{ getRootName(root.name) }}"
      ng-click="(root.isDevice || groupsSelectable) && selectRoot()"
      ng-class="{ selectedDevice: isSelectedRoot() }"
    >
      <i class="text-muted" c8y-icon="c8y-group-open" ng-show="!root.isDevice"></i>
      <i
        c8y-icon="check"
        ng-show="root.isDevice"
        ng-class="{
          'text-success': !readOnly && isSelectedRoot(),
          'text-muted': readOnly || !isSelectedRoot()
        }"
      ></i>
      {{ getRootName(root.name) }}
    </button>
  </div>

  <div
    ng-show="!loading && truncated"
    class="alert alert-info alert-truncated-results m-t-16"
    translate
  >
    Some assets or devices might not be shown. Try narrowing search criteria.
  </div>

  <div class="device-list" ng-class="{ 'noContext m-t-16 m-b-8': top && !parent }">
    <div class="device deviceRow text-truncate" ng-if="top && emptySelectionAvailable">
      <button
        class="btn btn-clean"
        ng-disabled="readOnly"
        ng-click="clickSelect()"
        ng-class="{ selectedDevice: isSelectionEmpty() }"
        title="{{ emptySelectionLabel | translate }}"
        type="button"
      >
        <i
          ng-show="emptySelectionIcon"
          c8y-icon="{{ emptySelectionIcon }}"
          ng-class="{
            'text-success': isSelectionEmpty(),
            'text-muted': !isSelectionEmpty()
          }"
        ></i>
        {{ emptySelectionLabel | translate }}
      </button>
    </div>
    <div
      class="device deviceRow text-truncate p-l-24"
      ng-repeat="child in children"
      c8y-device-selector-combo-devices
    >
      <div class="deviceContainer">
        <button
          title="{{ 'Expand' | translate }}"
          type="button"
          class="btn btn-clean text-primary expandBtn"
          ng-disabled="readOnly"
          ng-show="child.__children.length"
          ng-click="toggleChildren($event, getScope(), child)"
          style="margin-left: -20px"
        >
          <i c8y-icon="plus-square" ng-hide="child.openChildren"></i>
          <i c8y-icon="minus-square" ng-show="child.openChildren"></i>
        </button>
        <button
          class="btn-clean btn-clean"
          ng-disabled="readOnly"
          ng-click="groupsSelectable ? clickSelect(child) : child.isDevice && clickSelect(child)"
          ng-class="{ selectedDevice: isSelected(child) }"
          title="{{ child.name }}"
        >
          <i
            c8y-icon="c8y-group"
            ng-show="!child.isDevice"
            ng-class="{
              'text-success': isSelected(child),
              'text-muted': !isSelected(child),
              'c8y-icon-group-open': openChildren
            }"
          ></i>
          <i
            class="text-success"
            c8y-icon="check"
            ng-show="child.isDevice && isSelected(child)"
          ></i>
          <i
            class="text-muted"
            c8y-icon="exchange"
            ng-show="child.isDevice && !isSelected(child)"
          ></i>
          {{ child.name }}
        </button>
      </div>
    </div>
  </div>
</div>
