<div class="p-16 separator-bottom">
  <div class="input-group input-group-search">
    <input
      title="{{ 'Filter users' | translate }}"
      class="form-control"
      type="search"
      placeholder="{{ 'Filter users' | translate }}"
      ng-model="vm.searchQuery"
      ng-model-options="{ debounce: 800 }"
      ng-change="vm.onSearchQuery(vm.searchQuery)"
      ng-disabled="!vm.userFlatTree"
    />
    <span class="input-group-addon">
      <i c8y-icon="search" ng-show="vm.searchQuery.length === 0 || !vm.searchQuery"></i>
      <i
        c8y-icon="times"
        class="text-muted"
        ng-show="vm.searchQuery.length > 0"
        ng-click="vm.searchQuery = '';vm.onSearchQuery(vm.searchQuery)"
      ></i>
    </span>
  </div>
</div>
<div class="user-picker-scroll">
  <c8y-rectangle-spinner
    ng-if="vm.loading"
    message="'Loading users…' | translate"
  ></c8y-rectangle-spinner>
  <div class="list-group" ng-if="vm.userFlatTree">
    <div ng-if="vm.shouldShowWarning()" class="p-t-16 p-b-16 p-r-24 p-l-24">
      <div class="alert alert-warning" translate>
        Some users might not be shown. Try narrowing search criteria.
      </div>
    </div>
    <div
      ng-if="vm.userFlatTree.length === 0 && vm.loading === false"
      class="p-t-16 p-b-16 p-r-24 p-l-24"
    >
      <div class="alert alert-warning" translate>No users found.</div>
    </div>
    <div
      class="list-group-item d-flex a-i-center text-truncate p-l-0"
      ng-repeat="user in vm.userFlatTree"
      ng-if="vm.isVisible(user)"
    >
      <span
        class="d-inline-block p-r-4"
        ng-style="::{width: vm.userDepth(user)}"
        ng-hide="::user._owns.length"
      ></span>
      <button
        class="col-expand btn-dot"
        ng-style="::{'margin-left': (user._depth * 30)}"
        ng-click="::$event.stopPropagation();vm.toggleExpanded(user)"
        ng-show="::user._owns.length"
        title="{{ 'Expand/collapse' | translate }}"
      >
        <i
          c8y-icon="chevron-right"
          ng-class="{ 'icon-rotate-90': user._expanded }"
          ng-hide="vm.searchQuery"
        ></i>
      </button>
      <label class="c8y-radio m-r-8">
        <input
          aria-label="{{::user.userName}}"
          type="radio"
          ng-checked="vm.isSelected(user)"
          ng-click="::vm.toggleSelection(user)"
        />
        <span></span>
      </label>
      <button
        class="d-flex btn-clean fit-w a-i-center"
        title="{{::user.userName}}"
        ng-click="::vm.toggleSelection(user)"
      >
        <div class="user-dot" ng-class="{ 'user-disabled': !user.enabled }">
          {{::user.userName.substr(0,2)}}
        </div>
        <div class="username text-truncate l-h-1" data-cy="c8y-users--username">
          <span title="{{::user.userName}}">{{::user.userName}}</span>
          <small ng-if="::user.firstName.length || user.lastName.length" class="text-muted">
            <br />
            {{::user.firstName}} {{::user.lastName}}
          </small>
        </div>
      </button>
    </div>
  </div>
</div>
