<div
  class="dropdown"
  dropdown
  #dropdown="bs-dropdown"
  [insideClick]="true"
  (isOpenChange)="onOpenChange($event)"
  *ngIf="mode === 'search'"
>
  <button
    class="main-header-button dropdown-toggle c8y-dropdown"
    dropdownToggle
    type="button"
    [title]="'Search' | translate"
    aria-controls="searchDropdown"
  >
    <i c8yIcon="search" class="icon-2x"></i>
  </button>

  <div
    id="searchDropdown"
    *dropdownMenu
    class="search-header-menu dropdown-menu dropdown-menu-center"
  >
    <ng-container *ngTemplateOutlet="form"></ng-container>
  </div>
</div>

<div class="search-header-inline" *ngIf="mode === 'select'">
  <ng-container *ngTemplateOutlet="form"></ng-container>
</div>

<ng-template #form>
  <form [ngClass]="{ 'c8y-search-form': mode === 'search' }" novalidate #searchForm="ngForm">
    <c8y-typeahead
      [(ngModel)]="selected"
      placeholder="{{ 'Search for groups or assets…' | translate }}"
      (keydown)="keyDown($event)"
      (onIconClick)="onReset($event)"
      [icon]="term ? 'times' : 'search'"
      [allowFreeEntries]="false"
      [container]="container"
      name="selected"
    >
      <!-- filter buttons -->
      <c8y-li *ngIf="term.length !== 0" class="p-l-16 p-r-16">
        <div class="flex-row" *ngIf="mode === 'search'">
          <p class="m-r-4 text-muted">
            <em translate>Searching by exact match. Click for other search options:</em>
          </p>
          <div class="btn-group btn-group-sm">
            <button
              class="btn btn-default"
              title="{{ 'Starts with' | translate }}"
              (click)="onFilter(term + '*')"
            >
              {{ 'Starts with' | translate }}
            </button>
            <button
              class="btn btn-default"
              title="{{ 'Contains' | translate }}"
              (click)="onFilter('*' + term + '*')"
            >
              {{ 'Contains' | translate }}
            </button>
            <button
              class="btn btn-default"
              title="{{ 'Ends with' | translate }}"
              (click)="onFilter('*' + term)"
            >
              {{ 'Ends with' | translate }}
            </button>
          </div>
        </div>
      </c8y-li>

      <!-- Recent search -->
      <c8y-li
        *ngIf="term.length === 0 && recentSearchResults.length > 0"
        [selectable]="false"
        class="p-l-24 p-r-24"
      >
        <div class="legend form-block">
          <span translate>Recent search views</span>
        </div>
      </c8y-li>
      <c8y-li
        *ngFor="let result of term.length === 0 ? recentSearchResults : []"
        class="c8y-list__item--link m-l-16 m-r-16"
        (click)="open($event, result, result.name)"
      >
        <c8y-li-icon>
          <device-status [mo]="result" *ngIf="!result.c8y_IsDeviceGroup"></device-status>
          <i
            [c8yIcon]="getIcon(result)"
            class="c8y-icon-duocolor"
            *ngIf="result.c8y_IsDeviceGroup"
          ></i>
        </c8y-li-icon>
        {{ result.name || '--' }}
      </c8y-li>

      <!-- Recently registered devices -->
      <c8y-li
        *ngIf="term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0"
        class="p-l-24 p-r-24"
        [selectable]="false"
      >
        <div class="legend form-block">
          <span translate>Recently registered devices</span>
        </div>
      </c8y-li>
      <c8y-li
        *c8yFor="
          let result of term.length === 0 ? recentlyRegisteredResults$ : { data: [] };
          loadMore: 'none';
          pipe: filterPipe
        "
        class="c8y-list__item--link m-l-16 m-r-16"
        (click)="open($event, result, result.name)"
      >
        <c8y-li-icon>
          <device-status [mo]="result" *ngIf="!result.c8y_IsDeviceGroup"></device-status>
          <i
          [c8yIcon]="getIcon(result)"
            class="c8y-icon-duocolor"
            *ngIf="result.c8y_IsDeviceGroup"
          ></i>
        </c8y-li-icon>
        {{ result.name || '--' }}
      </c8y-li>

      <!-- Search results -->
      <c8y-li *ngIf="term.length !== 0" class="p-l-24 p-r-24" [selectable]="false">
        <div class="legend form-block">
          <span translate>Search results</span>
        </div>
      </c8y-li>
      <c8y-li
        *c8yFor="
          let result of results$;
          loadMore: 'auto';
          pipe: filterPipe;
          notFound: notFoundTemplate;
          loadingTemplate: loading;
          loadNextLabel: 'Find more…'
        "
        class="c8y-list__item--link  m-l-16 m-r-16"
        (click)="open($event, result, result.name)"
        [title]="result.name"
      >
        <c8y-li-icon>
          <device-status [mo]="result" *ngIf="!result.c8y_IsDeviceGroup"></device-status>
          <i
            [c8yIcon]="getIcon(result)"
            class="c8y-icon-duocolor"
            *ngIf="result.c8y_IsDeviceGroup"
          ></i>
        </c8y-li-icon>
        {{ result.name || '--' }}
      </c8y-li>

      <!-- No search results found entry -->
      <ng-template #notFoundTemplate>
        <c8y-li *ngIf="noMatch" class="p-16 c8y-empty-state" [selectable]="false">
          <c8y-li-icon [icon]="'search'"></c8y-li-icon>
          <p><strong translate>No match found.</strong></p>
          <small translate *ngIf="mode === 'search'">
            Try to filter or open the asset grid to show all devices and groups.
          </small>
          <small translate *ngIf="mode === 'select'">
            Try to rephrase your search word.
          </small>
        </c8y-li>
      </ng-template>

      <!-- loading bar first entries -->
      <c8y-li *ngIf="isLoading" class="p-t-32 p-b-0" style="position: relative;">
        <div class="spinner" style="right:0;">
          <div class="rect1"></div>
          <div class="rect2"></div>
          <div class="rect3"></div>
          <div class="rect4"></div>
          <div class="rect5"></div>
        </div>
      </c8y-li>

      <!-- loading bar for loading more entries (inventory roles) -->
      <ng-template #loading>
        <c8y-li class="text-center p-t-32 p-b-0" style="position:relative;">
          <div class="spinner" style="right:0;">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
          </div>
        </c8y-li>
      </ng-template>

      <!-- more filter possibilities -->
      <c8y-li
        class="m-t-24 bg-gray-lighter p-t-16 p-b-16 p-l-24 p-r-24"
        [selectable]="false"
        *ngIf="mode === 'search'"
      >
        <div class="flex-row">
          <i c8yIcon="info-circle" class="text-info m-r-4"></i>
          <p translate class="m-r-8">Need more filter possibilities?</p>
          <button
            type="button"
            class="m-l-auto btn btn-default btn-sm"
            translate
            (mousedown)="onOpenAssetTable()"
          >
            Go to the asset data table
          </button>
        </div>
      </c8y-li>
    </c8y-typeahead>
  </form>
</ng-template>