<div
  class="dropdown"
  #searchDropdown="bs-dropdown"
  [insideClick]="true"
  (isOpenChange)="onOpenChange($event)"
  [cdkTrapFocus]="searchDropdown.isOpen"
  *ngIf="mode === 'search'"
  dropdown
>
  <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
      (onIconClick)="onReset($event)"
      [icon]="term ? 'times' : 'search'"
      title="Search"
      placeholder="{{ customPlaceholder ? customPlaceholder : defaultPlaceholder }}"
      name="selected"
      [(ngModel)]="selected"
      (keydown)="keyDown($event)"
      [allowFreeEntries]="false"
      [container]="container"
      [highlightFirstItem]="true"
    >
      <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 && mode === 'search'"
        [selectable]="false"
      >
        <div class="d-flex">
          <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 }}"
              type="button"
              data-cy="search-input--search-starts-with"
              (click)="onFilter(term + '*')"
            >
              {{ 'Starts with' | translate }}
            </button>
            <button
              class="btn btn-default"
              title="{{ 'Contains' | translate }}"
              type="button"
              data-cy="search-input--search-contains"
              (click)="onFilter('*' + term + '*')"
            >
              {{ 'Contains' | translate }}
            </button>
            <button
              class="btn btn-default"
              title="{{ 'Ends with' | translate }}"
              type="button"
              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
        class="p-l-24 p-r-24"
        *ngIf="
          term.length === 0 && (recentlyRegisteredResults$ | async)?.data?.length > 0 && !groupsOnly
        "
        [selectable]="false"
      >
        <div class="legend form-block">
          <span translate>Recently registered devices</span>
        </div>
      </c8y-li>
      <c8y-li
        class="c8y-list__item--link m-l-16 m-r-16"
        *c8yFor="
          let result of term.length === 0 && !groupsOnly
            ? recentlyRegisteredResults$
            : { data: [] };
          loadMore: 'none'
        "
        (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
        class="p-l-24 p-r-24"
        *ngIf="term.length !== 0"
        [selectable]="false"
      >
        <div class="legend form-block m-0">
          <span translate>Search results</span>
        </div>
      </c8y-li>
      <c8y-li
        class="c8y-list__item--link m-l-16 m-r-16"
        [title]="result.name"
        *c8yFor="
          let result of results$;
          loadMore: 'auto';
          notFound: notFoundTemplate;
          loadingTemplate: loading;
          loadNextLabel: 'Find more…'
        "
        (click)="open($event, result, 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-ui-empty-state
          [icon]="'search'"
          [title]="'No match found.' | translate"
          data-cy="search-input--empty-state"
          [ngClass]="{ 'p-4': mode === 'search' }"
          [horizontal]="true"
          *ngIf="noMatch"
        >
          <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-ui-empty-state>
      </ng-template>

      <!-- loading bar first entries -->
      <c8y-li *ngIf="isLoading">
        <c8y-loading></c8y-loading>
      </c8y-li>

      <!-- loading bar for loading more entries (inventory roles) -->
      <ng-template #loading>
        <c8y-li>
          <c8y-loading></c8y-loading>
        </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
            class="text-info m-r-4"
            c8yIcon="info-circle"
          ></i>
          <p
            class="m-r-8"
            translate
          >
            Need more filter possibilities?
          </p>
          <button
            class="m-l-16 btn btn-default btn-sm"
            title="{{ 'Go to the asset data table' | translate }}"
            type="button"
            (mousedown)="onOpenAssetTable()"
            data-cy="search-input--asset-table-btn"
          >
            {{ 'Go to the asset data table' | translate }}
          </button>
        </div>
      </c8y-li>
    </c8y-typeahead>
  </form>
</ng-template>