<div
  class="dropdown"
  ng-class="{ open: vm.isOpen }"
  uib-dropdown
  ng-show="vm.isVisible()"
  is-open="vm.isOpen"
  on-toggle="vm.onToggle()"
>
  <button
    class="main-header-button dropdown-toggle c8y-dropdown"
    type="button"
    title="{{ 'Search' | translate }}"
    uib-dropdown-toggle
    aria-haspopup="true"
  >
    <i c8y-icon="search" class="icon-2x"></i>
  </button>

  <div class="search-header-menu dropdown-menu dropdown-menu-center" uib-dropdown-menu>
    <form ng-submit="vm.search(vm.term, 0)" placeholder-no-required-hint novalidate>
      <div class="input-group input-group-lg input-group-search">
        <input
          id="search"
          type="search"
          ng-click="$event.stopPropagation()"
          class="form-control input-lg"
          required="required"
          placeholder="{{ 'Search for groups or assets…' | translate }}"
          ng-model="vm.term"
        />
        <span class="input-group-btn">
          <button
            class="btn btn-link dropdown-toggle"
            type="button"
            aria-label="{{ 'Search' | translate }}"
            aria-haspopup="true"
            ng-if="vm.searchFunctionList.length > 1"
            uib-dropdown-toggle
          >
            <span class="caret"></span>
            <i c8y-icon="search"></i>
          </button>

          <button
            class="btn btn-link"
            type="submit"
            title="{{ 'Submit' | translate }}"
            ng-if="vm.searchFunctionList.length == 1"
          >
            <i c8y-icon="arrow-right"></i>
          </button>

          <ul class="dropdown-menu" ng-if="vm.searchFunctionList.length > 1" uib-dropdown-menu>
            <li
              ng-repeat="searchFunction in vm.searchFunctionList"
              ng-hide="vm.searchFunction.hide"
            >
              <button
                class="tooltip-no-max-width"
                type="button"
                aria-label="{{ searchFunction.tooltip | translate }}"
                uib-tooltip="{{ searchFunction.tooltip | translate }}"
                tooltip-placement="bottom"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
                ng-click="vm.search(vm.term, $index)"
              >
                {{ searchFunction.name | translate }}
              </button>
            </li>
          </ul>
        </span>
        <span for="search" class="sr-only" translate>Search</span>
      </div>
    </form>
  </div>
</div>
