<div (click)="$event.stopPropagation()">
  <div
    [style.width]="deviceType === 'mobile' ? '85vw' : '30rem'"
    (keydown.tab)="$event.stopPropagation()"
  >
    <div class="align-items-center d-flex search-container">
      <ion-icon class="ml-2 mr-0" name="search-outline" />
      <input
        #search
        autocomplete="off"
        autocorrect="off"
        class="border-0 p-2 w-100"
        name="search"
        type="text"
        [formControl]="searchFormControl"
        [placeholder]="placeholder"
      />
      @if (deviceType !== 'mobile' && !searchFormControl.value) {
        <div class="hot-key-hint mx-1 px-1">/</div>
      }
      @if (searchFormControl.value) {
        <button
          class="h-100 no-min-width px-3 rounded-0"
          mat-button
          (click)="initialize()"
        >
          <ion-icon class="m-0" name="close-circle-outline" />
        </button>
      } @else {
        <button
          class="h-100 no-min-width px-3 rounded-0"
          mat-button
          (click)="onCloseAssistant()"
        >
          <ion-icon class="m-0" name="close-outline" />
        </button>
      }
    </div>
    <div
      *ngIf="isLoading || searchFormControl.value"
      class="overflow-auto py-3 result-container"
    >
      <div>
        <div class="h6 mb-1 px-2" i18n>Holdings</div>
        <gf-assistant-list-item
          *ngFor="let searchResultItem of searchResults?.holdings"
          mode="holding"
          [item]="searchResultItem"
          (clicked)="onCloseAssistant()"
        />
        <ng-container *ngIf="searchResults?.holdings?.length === 0">
          @if (isLoading) {
            <ngx-skeleton-loader
              animation="pulse"
              class="mx-2"
              [theme]="{
                height: '1.5rem',
                width: '100%'
              }"
            />
          } @else {
            <div class="px-2 py-1" i18n>No entries...</div>
          }
        </ng-container>
      </div>
      <div *ngIf="hasPermissionToAccessAdminControl" class="mt-3">
        <div class="h6 mb-1 px-2" i18n>Asset Profiles</div>
        <gf-assistant-list-item
          *ngFor="let searchResultItem of searchResults?.assetProfiles"
          mode="assetProfile"
          [item]="searchResultItem"
          (clicked)="onCloseAssistant()"
        />
        <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
          @if (isLoading) {
            <ngx-skeleton-loader
              animation="pulse"
              class="mx-2"
              [theme]="{
                height: '1.5rem',
                width: '100%'
              }"
            />
          } @else {
            <div class="px-2 py-1" i18n>No entries...</div>
          }
        </ng-container>
      </div>
    </div>
  </div>
  <form [formGroup]="filterForm">
    @if (!searchFormControl.value) {
      <div class="date-range-selector-container p-3">
        <mat-form-field appearance="outline" class="w-100 without-hint">
          <mat-label i18n>Date Range</mat-label>
          <mat-select
            [formControl]="dateRangeFormControl"
            (selectionChange)="onChangeDateRange($event.value)"
          >
            @for (range of dateRangeOptions; track range) {
              <mat-option [value]="range.value">{{ range.label }}</mat-option>
            }
          </mat-select>
        </mat-form-field>
      </div>
      <div class="p-3">
        <div class="mb-3">
          <mat-form-field appearance="outline" class="w-100 without-hint">
            <mat-label i18n>Account</mat-label>
            <mat-select formControlName="account">
              <mat-option [value]="null" />
              @for (account of accounts; track account.id) {
                <mat-option [value]="account.id">
                  <div class="d-flex">
                    <gf-asset-profile-icon
                      *ngIf="account.Platform?.url"
                      class="mr-1"
                      [tooltip]="account.Platform?.name"
                      [url]="account.Platform?.url"
                    /><span>{{ account.name }}</span>
                  </div>
                </mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
        <div class="mb-3">
          <mat-form-field appearance="outline" class="w-100 without-hint">
            <mat-label i18n>Holding</mat-label>
            <mat-select
              formControlName="holding"
              [compareWith]="holdingComparisonFunction"
            >
              <mat-select-trigger>{{
                filterForm.get('holding')?.value?.name
              }}</mat-select-trigger>
              <mat-option [value]="null" />
              @for (holding of holdings; track holding.name) {
                <mat-option [value]="holding">
                  <div class="line-height-1 text-truncate">
                    <span
                      ><b>{{ holding.name }}</b></span
                    >
                    <br />
                    <small class="text-muted"
                      >{{ holding.symbol | gfSymbol }} ·
                      {{ holding.currency }}</small
                    >
                  </div>
                </mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
        <div class="mb-3">
          <mat-form-field appearance="outline" class="w-100 without-hint">
            <mat-label i18n>Tag</mat-label>
            <mat-select formControlName="tag">
              <mat-option [value]="null" />
              @for (tag of tags; track tag.id) {
                <mat-option [value]="tag.id">{{ tag.label }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
        <div class="mb-3">
          <mat-form-field appearance="outline" class="w-100 without-hint">
            <mat-label i18n>Asset Class</mat-label>
            <mat-select formControlName="assetClass">
              <mat-option [value]="null" />
              @for (assetClass of assetClasses; track assetClass.id) {
                <mat-option [value]="assetClass.id">{{
                  assetClass.label
                }}</mat-option>
              }
            </mat-select>
          </mat-form-field>
        </div>
        <div class="d-flex w-100">
          <button
            i18n
            mat-button
            [disabled]="
              !hasFilter(filterForm.value) || !hasPermissionToChangeFilters
            "
            (click)="onResetFilters()"
          >
            Reset Filters
          </button>
          <span class="gf-spacer"></span>
          <button
            color="primary"
            i18n
            mat-flat-button
            [disabled]="!filterForm.dirty || !hasPermissionToChangeFilters"
            (click)="onApplyFilters()"
          >
            Apply Filters
          </button>
        </div>
      </div>
    }
  </form>
</div>
