<div class="builder-property-search">
  <label class="builder-property-search__label" for="builder-property-search-input">
    <app-icon name="search" [size]="14" aria-hidden="true" />
    <span class="sr-only">{{ 'builder.propertySearchLabel' | translate }}</span>
  </label>
  <input
    id="builder-property-search-input"
    type="search"
    class="builder-property-search__input"
    [placeholder]="'builder.propertySearchPlaceholder' | translate"
    [attr.aria-label]="'builder.propertySearchLabel' | translate"
    [ngModel]="query()"
    (ngModelChange)="query.set($event)"
    (focus)="onFocus()"
    (blur)="onBlur()"
  />

  @if (open() && query().trim()) {
    <ul class="builder-property-search__results" [attr.aria-label]="'builder.propertySearchResultsLabel' | translate">
      @for (result of results(); track result.key) {
        <li>
          <a [routerLink]="['/edit', result.sectionId] | langRoute" (click)="selectResult()">
            <span class="builder-property-search__result-label">{{ result.label }}</span>
            <span class="builder-property-search__result-section">{{ result.sectionLabel }}</span>
          </a>
        </li>
      } @empty {
        <li class="builder-property-search__empty">{{ 'builder.propertySearchNoResults' | translate }}</li>
      }
    </ul>
  }
</div>
