<div id="search-sidebar-results" *ngIf="searchResult">
  <div class="sidebar-view-result">
    <div class="sidebar-view-result-header" (click)="openAllResult()" [ngClass]="{ 'active-node': isOnSearchPage }">
      <mat-icon>search</mat-icon>
      <span class="resource-name" translate>All result</span>
      <span></span>
    </div>
  </div>

  <div *ngFor="let search of searchResult | keyvalue" class="sidebar-view-result">
    <div *ngIf="searchResult.get(search.key).length > 0">
      <div
        class="sidebar-view-result-header"
        [ngClass]="{
          'active-node': !isOnSearchPage && search.key === activeResourceId
        }"
        (click)="openDrive(search.key)"
      >
        <app-avatar [blob]="searchResult.get(search.key)[0].resourceAvatar"></app-avatar>
        <span class="resource-name">{{ searchResult.get(search.key)[0].resourceName }}</span>
        <span>{{ searchResult.get(search.key).length }}</span>
      </div>
      <ul>
        <li *ngFor="let result of searchResult.get(search.key)" (click)="openPath(search.key, result)">
          <span class="mdi mdi-{{ result.file.icon }} file-{{ result.file.icon }}"></span>
          <span class="file-name">{{ result.file.fullName }}</span>
        </li>
      </ul>
    </div>
  </div>
</div>
