<!-- this must be ng-form because it's used inside a widget config, so it will be inside another form -->

<ng-form name="searchForm" class="d-contents">
  <div class="input-group input-group-search">
    <input
      type="search"
      class="form-control"
      placeholder="{{ placeholder | translate }}"
      ng-model="searchData.text"
      ng-keyup="checkEnter($event)"
    />
    <span class="input-group-addon">
      <i c8y-icon="search" ng-click="search(searchData)"></i>
      <i
        c8y-icon="times"
        class="text-muted"
        ng-show="searchData.text.length > 0"
        ng-click="clearSearch()"
      ></i>
    </span>
  </div>
</ng-form>

<div class="alert alert-info" translate ng-show="!searchDone && !searchProgress">
  Use the input field above to search for devices.
</div>

<div ng-show="searchProgress" class="m-t-4">
  <c8y-rectangle-spinner message="'Searching devices…' | translate"></c8y-rectangle-spinner>
</div>

<div ng-show="searchDone">
  <div class="alert alert-warning m-t-8" ng-show="devices.length === 0" translate>
    No results found.
  </div>

  <a
    title="{{ 'Select all' | translate }}"
    class="btn btn-link p-l-0"
    ng-click="selectAll(devices)"
    ng-show="devices.length"
    >{{ 'Select all' | translate }}</a
  >
  <a
    title="{{ 'Deselect all' | translate }}"
    class="btn btn-link"
    ng-click="deselectAll()"
    ng-show="devices.length"
    >{{ 'Deselect all' | translate }}</a
  >
  <ul class="list-group">
    <c8y-device-selector-list
      ng-repeat="device in devices"
      selected-devices="selectedDevices"
      disabled-devices="disabledDevices"
      device="device"
    ></c8y-device-selector-list>
  </ul>
  <div class="card-block">
    <c8y-load-more hide-page-size="true"></c8y-load-more>
  </div>
</div>
