<div class="adf-search-container">
    <div *ngIf="isLoggedIn()" [@transitionMessages]="subscriptAnimationState" (@transitionMessages.done)="applySearchFocus($event)">
        <a mat-icon-button
            *ngIf="expandable"
            id="adf-search-button"
            class="adf-search-button"
            (click)="toggleSearchBar($event)"
            (keyup.enter)="toggleSearchBar($event)">
            <mat-icon aria-label="search button">search</mat-icon>
        </a>
        <mat-form-field class="adf-input-form-field-divider">
            <input matInput #searchInput
                [type]="inputType"
                [autocomplete]="getAutoComplete()"
                id="adf-control-input"
                [(ngModel)]="searchTerm"
                (focus)="activateToolbar($event)"
                (blur)="onBlur($event)"
                (keyup.escape)="toggleSearchBar()"
                (keyup.arrowdown)="selectFirstResult()"
                (ngModelChange)="inputChange($event)"
                [searchAutocomplete]="auto"
                (keyup.enter)="searchSubmit($event)">
        </mat-form-field>
    </div>
</div>

<adf-search #auto="searchAutocomplete"
            class="adf-search-result-autocomplete"
            [maxResults]="liveSearchMaxResults"
            [queryBody]="customQueryBody">
    <ng-template let-data>
        <mat-list *ngIf="isSearchBarActive()" id="autocomplete-search-result-list">
            <mat-list-item
                *ngFor="let item of data?.list?.entries; let idx = index"
                id="result_option_{{idx}}"
                [attr.data-automation-id]="'autocomplete_for_' + item.entry.name"
                [tabindex]="0"
                (focus)="onFocus($event)"
                (blur)="onBlur($event)"
                (keyup.arrowdown)="onRowArrowDown($event)"
                (keyup.arrowup)="onRowArrowUp($event)"
                class="adf-search-autocomplete-item"
                (click)="elementClicked(item)"
                (keyup.enter)="elementClicked(item)">
                <mat-icon mat-list-icon>
                    <img [src]="getMimeTypeIcon(item)" />
                </mat-icon>
                <h4 mat-line id="result_name_{{idx}}"
                    *ngIf="highlight; else elseBlock"
                    class="adf-search-fixed-text"
                    [innerHtml]="item.entry.name | highlight: searchTerm">
                    {{ item?.entry.name }}
                </h4>
                <ng-template #elseBlock>
                    <h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" [innerHtml]="item.entry.name"></h4>
                </ng-template>
                <p mat-line class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
            </mat-list-item>
            <mat-list-item id="search_no_result"
                data-automation-id="search_no_result_found"
                *ngIf="data?.list?.entries.length === 0">
                <ng-content
                    selector="adf-empty-search-result"
                    *ngIf="isNoSearchTemplatePresent() else defaultNoResult">
                </ng-content>
                <ng-template #defaultNoResult>
                    <p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</p>
                </ng-template>
            </mat-list-item>
        </mat-list>
    </ng-template>
</adf-search>
