<div class="relative flex flex-row items-center bg-gray-300 rounded-sm" cdkOverlayOrigin>
  <div class="absolute top-0 -mt-0.5 left-0 flex items-center p-2">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-secondary" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd"
        d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
        clip-rule="evenodd" />
    </svg>
  </div>
  <input [cdkTrapFocus]="false" [cdkTrapFocusAutoCapture]="true" class="w-full !pl-7 rounded-tr-sm" type="text"
    [(ngModel)]="textSearch" placeholder="Search for connections, press ENTER to apply"
    (keydown)="onSearchKeyDown($event)" (blur)="onFocusLost($event)" (ngModelChange)="onSearchModelChange($event)"
    #searchBar>
</div>


<sfng-dropdown externalTrigger="true" #suggestionDropdown *ngIf="mode === 'default'; else: suggestionTemplate"
  offsetY="0">
  <div class="bg-gray-300">
    <ng-container *ngTemplateOutlet="suggestionTemplate"></ng-container>
  </div>
</sfng-dropdown>

<ng-template #suggestionTemplate>
  <ul class="self-stretch p-2" *ngIf="!!textSearch">
    <li (click)="applySuggestion('_textsearch', null, $event)" [sfngNetquerySuggestion]="textSearch"
      [sfngSuggestion]="{field: '_textsearch', values: []}" #suggestion="sfngNetquerySuggestion"
      class="flex flex-row justify-between w-full gap-2 px-2 py-1 rounded-sm cursor-pointer hover:bg-gray-400"
      [ngClass]="{'bg-gray-400': suggestion.active}">
      <span class="text-secondary text-xxs">Full-Text Search: <span
          class="text-xs text-primary">{{ textSearch }}</span></span>
    </li>
  </ul>

  <div class="flex flex-col items-start justify-start w-full gap-4 p-3 px-4" (mouseenter)="cancelDropdownClose()"
    [@fadeInList]="suggestions.length" (mousemove)="resetKeyboardSelection()">

    <ng-container *ngFor="let sug of suggestions; trackBy: trackSuggestion">
      <div class="flex flex-col items-start self-stretch justify-start gap-1">
        <h3 class="flex flex-row items-center w-full gap-2 text-xxs text-tertiary">
          Filter by {{ labels[sug.field] || sug.field }}
        </h3>
        <ul class="self-stretch">
          <li *ngFor="let val of sug.values" (click)="applySuggestion(sug.field, val.value, $event, sug.start)"
            [sfngNetquerySuggestion]="val.value" [sfngSuggestion]="sug" #suggestion="sfngNetquerySuggestion"
            class="flex flex-row justify-between w-full gap-2 px-2 py-1 rounded-sm cursor-pointer hover:bg-gray-400"
            [ngClass]="{'bg-gray-400': suggestion.active}">
            <span class="text-primary">{{ val.display || (val.value === '' ? 'N/A' : val.value) }}</span>
            <span class="text-secondary">#{{ val.count }} connections</span>
          </li>
        </ul>
      </div>
    </ng-container>

    <div class="flex flex-row items-center justify-start w-full gap-2 text-xs border-gray-400 text-primary" [@fadeIn]
      *ngIf="loading" [ngClass]="{'border-t pt-2': !!suggestions.length}">
      <svg class="w-4 h-4 animate-spin text-secondary" xmlns="http://www.w3.org/2000/svg" fill="none"
        viewBox="0 0 24 24">
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
        <path class="opacity-75" fill="currentColor"
          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
        </path>
      </svg>
      Loading suggestions ...
    </div>

    <ng-container *ngIf="!suggestions?.length && !loading">
      <span>
        There are no suggestions for your query. Press
        <pre
          class="inline-block px-0.5 font-mono uppercase bg-gray-500 bg-opacity-25 rounded-sm border border-gray-500 text-xxs">Enter</pre>
        to
        perform a full text search.
      </span>
    </ng-container>
  </div>
</ng-template>
