<div class="search-box">
  <div class="input-wrapper">
    <app-icon
      (click)="handleSearch()"
      name="search"
      [size]="16"
      [stroke]="
        value.length > 0 ? 'var(--text-secondary)' : 'var(--text-tertiary)'
      "
    ></app-icon>
    <input
      class="h4"
      type="text"
      (input)="handleValueChange($event)"
      [value]="value"
      [placeholder]="placeholder"
    />
  </div>

  <div *ngIf="results.length" class="results-wrapper">
    <ng-container *ngFor="let result of results; index as i">
      <button
        *ngIf="i < maxResults"
        (click)="handleChoose(result.id)"
        class="p3"
      >
        {{ result.label }}
      </button>
    </ng-container>
  </div>
</div>
