<div class="app-select" [class.open]="isOpen" [class.disabled]="disabled" [class.sm]="size === 'sm'">
  <button
    type="button"
    class="app-select-trigger"
    (click)="toggle()"
    [attr.aria-expanded]="isOpen"
    [attr.aria-disabled]="disabled"
  >
    <span class="app-select-label">{{ displayLabel }}</span>
    <i class="bi bi-chevron-down"></i>
  </button>

  <div class="app-select-panel" *ngIf="isOpen">
    <div class="app-select-search" *ngIf="searchable" (click)="$event.stopPropagation()">
      <i class="bi bi-search"></i>
      <input
        type="text"
        class="app-select-search-input"
        [value]="searchTerm"
        [placeholder]="searchPlaceholder"
        (input)="onSearchInput($any($event.target).value)"
        (keydown)="onSearchKeydown($event)"
      />
      <button
        *ngIf="searchTerm"
        type="button"
        class="app-select-search-clear"
        (click)="clearSearch($event)"
        aria-label="Limpar pesquisa"
      >
        <i class="bi bi-x-lg"></i>
      </button>
    </div>

    <button
      type="button"
      class="app-select-option"
      *ngFor="let opt of filteredOptions; trackBy: trackByValue"
      [class.selected]="isSelected(opt)"
      (click)="selectOption(opt)"
    >
      <span class="label">{{ getOptionLabel(opt) }}</span>
      <i class="bi bi-check2" *ngIf="isSelected(opt)"></i>
    </button>

    <div class="app-select-empty" *ngIf="!filteredOptions || filteredOptions.length === 0">
      Nenhuma opção
    </div>
  </div>
</div>
