<div [attr.aria-expanded]="isListBoxExpanded"
     aria-haspopup="listbox"
     [attr.aria-owns]="isListBoxExpanded ? 'search-suggest-listbox-' + generatedId : null"
     class="search-suggest__combobox"
     role="combobox">
    <p class="mb-0">{{searchText}}</p>
    <button #buttonRef
            (keydown.enter)="onSearch()"
            (click)="onSearch()"
            class="btn btn-link font-weight-bold p-0">Sprawdź
    </button>
    
    <!-- suggestion list -->
    <ng-template #templatePortalContent>
        <ul #q (keydown)="onKeydown($event)" *ngIf="apiModels?.length"
            cdkTrapFocus
            class="search-suggest__listbox--schedule search-suggest__listbox m-0"
            id="search-suggest-listbox-{{generatedId}}"
            role="listbox"
            tabindex="0">

            <!-- suggestion list item -->
            <li (click)="onActiveSuggestionClick()" (mouseenter)="activeSuggestionIndex = i"
                (mouseleave)="activeSuggestionIndex = notSelectedSuggestionIndex"
                *ngFor="let option of listBoxOptions; let i = index;"
                [attr.aria-selected]="i === activeSuggestionIndex"
                [ngClass]="{'active': i === activeSuggestionIndex}"
                class="search-suggest__listbox-item"
                id="search-suggest-listbox-item-{{i}}"
                role="option">

                <!-- title -->
                <span class="search-suggest__listbox-title">
                <span class="visually-hidden">
                    {{ 'GoTo' | translate }}
                </span>
                    {{ option.title }}
            </span>
            </li>

            <!-- suggestion empty list item -->
            <li *ngIf="listBoxOptions.length === 0"
                class="search-suggest__listbox-item"
                role="option">

                <!-- title -->
                <span class="search-suggest__listbox-title">
                Brak wyników
            </span>
            </li>
        </ul>
    </ng-template>
</div>
