@if (isLoggedIn()) {
  <div>
    <adf-search-text-input  #searchTextInput
      [searchTerm]= "searchTerm"
      [expandable]="expandable"
      [autocomplete]="autocomplete"
      [liveSearchEnabled]="liveSearchEnabled"
      [focusListener]="focusSubject.asObservable()"
      [searchAutocomplete]="auto"
      (searchChange)="inputChange($event)"
      (reset)="onReset($event)"
      (selectResult)="onSelectFirstResult()"
      (submit)="submit.emit($event)" />
    <adf-search #search
      #auto="searchAutocomplete"
      class="adf-search-result-autocomplete"
      [maxResults]="liveSearchMaxResults">
      <ng-template let-data>
        @if (searchTextInput?.isSearchBarActive()) {
          <mat-list id="autocomplete-search-result-list">
            @for (item of data?.list?.entries; track item; let idx = $index) {
              <mat-list-item
                id="result_option_{{idx}}"
                [attr.data-automation-id]="'autocomplete_for_' + item.entry.name"
                [tabindex]="0"
                (blur)="onBlur($event)"
                (keyup.arrowdown)="onRowArrowDown($event)"
                (keyup.arrowup)="onRowArrowUp($event)"
                class="adf-search-autocomplete-item"
                (click)="elementClicked(item)"
                (keyup.enter)="elementClicked(item)"
                (touchend)="elementClicked(item)">
                <!-- This is a comment -->
                <mat-icon matListItemLine>
                  <img [alt]="getMimeType(item)" [src]="getMimeTypeIcon(item)"/>
                </mat-icon>
                @if (highlight) {
                  <h4 matListItemTitle id="result_name_{{idx}}"
                    class="adf-search-fixed-text"
                    [innerHtml]="item.entry.name | highlight: searchTerm">
                    {{ item?.entry.name }}
                  </h4>
                } @else {
                  <h4 class="adf-search-fixed-text" matListItemTitle id="result_name_{{idx}}"
                  [innerHtml]="item.entry.name"></h4>
                }
                <p matListItemLine class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
              </mat-list-item>
            }
            @if (data?.list?.entries.length === 0) {
              <mat-list-item id="search_no_result"
                data-automation-id="search_no_result_found"
                >
                @if (isNoSearchTemplatePresent()) {
                  <ng-content
                    selector="adf-empty-search-result"
                    />
                } @else {
                  <p matListItemLine class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm:
                  searchTerm} }}</p>
                }
              </mat-list-item>
            }
          </mat-list>
        }
      </ng-template>
    </adf-search>
  </div>
}