<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-right"
  >
    <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"
    >
      <div
        *ngIf="enableCustomTemplatePlaceholder && mode === 'search'"
        class="c8y-list__item p-l-24 p-r-24 p-b-8 separator-bottom sticky-top p-t-4"
      >
        <ng-content></ng-content>
      </div>

      <!-- 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>
          <ng-container *ngIf="result | shouldShowMo: deviceType.DEVICE; else group">
            <device-status [mo]="result"></device-status>
          </ng-container>
          <ng-template #group>
            <i [c8yIcon]="result | getGroupIcon" class="c8y-icon-duocolor"></i>
          </ng-template>
        </c8y-li-icon>
        {{ result.name || '--' }}
      </c8y-li>

      <!-- Recently registered devices -->
      <c8y-li
        *ngIf="term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly"
        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 && !groupsOnly) ? recentlyRegisteredResults$ : { data: [] };
          loadMore: 'none';
        "
        class="c8y-list__item--link m-l-16 m-r-16"
        (click)="open($event, result, result.name)"
      >
        <c8y-li-icon>
          <ng-container *ngIf="result | shouldShowMo: deviceType.DEVICE; else group">
            <device-status [mo]="result"></device-status>
          </ng-container>
          <ng-template #group>
            <i [c8yIcon]="result | getGroupIcon" class="c8y-icon-duocolor"></i>
          </ng-template>
        </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';
          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>
          <ng-container *ngIf="result | shouldShowMo: deviceType.DEVICE; else group">
            <device-status [mo]="result"></device-status>
          </ng-container>
          <ng-template #group>
            <i [c8yIcon]="result | getGroupIcon" class="c8y-icon-duocolor"></i>
          </ng-template>
        </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>