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

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

      <!-- filter buttons -->
      <c8y-li *ngIf="term.length !== 0" class="p-l-16 p-r-16">
        <div class="d-flex" *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"
              type="button"
              title="{{ 'Starts with' | translate }}"
              data-cy="search-input--search-starts-with"
              (click)="onFilter(term + '*')"
            >
              {{ 'Starts with' | translate }}
            </button>
            <button
              class="btn btn-default"
              type="button"
              title="{{ 'Contains' | translate }}"
              data-cy="search-input--search-contains"
              (click)="onFilter('*' + term + '*')"
            >
              {{ 'Contains' | translate }}
            </button>
            <button
              class="btn btn-default"
              type="button"
              title="{{ 'Ends with' | translate }}"
              data-cy="search-input--search-ends-with"
              (click)="onFilter('*' + term)"
            >
              {{ 'Ends with' | translate }}
            </button>
          </div>
        </div>
      </c8y-li>

      <!-- Recent search -->
      <c8y-li
        class="p-l-24 p-r-24"
        *ngIf="term.length === 0 && recentSearchResults.length > 0"
        [selectable]="false"
      >
        <div class="legend form-block">
          <span translate>Recent search views</span>
        </div>
      </c8y-li>
      <c8y-li
        class="c8y-list__item--link m-l-16 m-r-16"
        *ngFor="let result of term.length === 0 ? recentSearchResults : []"
        (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 
              class="c8y-icon-duocolor"
              [c8yIcon]="result | getGroupIcon | async"
              >
            </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 
              class="c8y-icon-duocolor"
              [c8yIcon]="result | getGroupIcon | async" 
              >
            </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"
        data-cy="search-input--search-results"
      >
        <c8y-li-icon>
          <ng-container *ngIf="result | shouldShowMo: deviceType.DEVICE; else group">
            <device-status [mo]="result"></device-status>
          </ng-container>
          <ng-template #group>
            <i 
              class="c8y-icon-duocolor"
              [c8yIcon]="result | getGroupIcon | async"
              >
            </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" data-cy="search-input--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-level-2 p-t-16 p-b-16 p-l-24 p-r-24 sticky-bottom"
        [selectable]="false"
        *ngIf="mode === 'search'"
      >
        <div class="d-flex a-i-center">
          <i c8yIcon="info-circle" class="text-info m-r-4"></i>
          <p translate class="m-r-8">Need more filter possibilities?</p>
          <button
            class="m-l-16 btn btn-default btn-sm"
            title="{{ 'Go to the asset data table' | translate }}"
            data-cy="search-input--asset-table-btn"
            type="button"
            (mousedown)="onOpenAssetTable()"
          >
            {{ 'Go to the asset data table' | translate }}
          </button>
        </div>
      </c8y-li>
    </c8y-typeahead>
  </form>
</ng-template>