<span id="search">
  <div id="search-bar">
    <label for="search-input">
      <mat-icon aria-hidden="search" aria-label="search" inline="true" (click)="onSearch($event, search)">search</mat-icon>
    </label>
    <input id="search-input" #searchInput class="nano-input" [(ngModel)]="search" type="search" placeholder="Search..." (keyup)="onSearch($event, search)" (click)="onSearch($event, search)" />
  </div>

  <mat-selection-list
    *ngIf="showSearchOptions"
    dense
    id="search-options"
    [(ngModel)]="selectedSearchMode"
    (ngModelChange)="doSearch(search, selectedSearchMode[0], $event)"
    [multiple]="false"
    [ngClass]="{ 'desktop-phone': !isOnApp }"
  >
    <mat-list-option [value]="searchMode.ROOM" *ngIf="selectedRoom">
      <div class="option">
        <mat-icon>search</mat-icon><span class="nowrap" translate>Search in this room</span><span class="room-name">({{ selectedRoom.data.name }})</span>
      </div>
    </mat-list-option>
    <mat-list-option [value]="searchMode.GLOBAL">
      <div class="option"><mat-icon>search</mat-icon><span translate>Search globally</span></div>
    </mat-list-option>
    <!-- <mat-list-option [value]="searchMode.CUSTOM">
            <div class="option"><mat-icon>search</mat-icon><span translate>Search in specific rooms...</span></div>
        </mat-list-option> -->
    <mat-list-option *ngFor="let contact of searchedContacts" [value]="{ id: contact.id, type: 'private' }" routerLink="room/{{ contact.id }}/chat/private" routerLinkActive="active">
      <div class="option">
        <app-avatar [accountAvatarRecord]="contact"></app-avatar>
        <span>{{ contact.avatarName }}</span>
        <div class="icon-box">
          <mat-icon>person</mat-icon>
        </div>
      </div>
    </mat-list-option>
    <mat-list-option *ngFor="let room of searchedRooms" [value]="{ id: room.id, type: 'room' }" routerLink="room/{{ room.id }}/chat/room" routerLinkActive="active">
      <div class="option">
        <app-avatar [blob]="room.blob"></app-avatar>
        <span>{{ room.name }}</span>
        <div class="icon-box">
          <mat-icon [ngClass]="{ warn: isNanoCompeting }" *ngIf="room.isNanoConnected">computer</mat-icon>
          <span class="mdi mdi-crown info-flag" *ngIf="me?.id === room?.ownerAccountId"></span>
        </div>
      </div>
    </mat-list-option>
  </mat-selection-list>
</span>
