<div id="search-sidebar-results" *ngIf="data">
  <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 data | keyvalue" class="sidebar-view-result">
    <div *ngIf="data.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]="data.get(search.key)[0].resourceAvatar"></app-avatar>
        <span class="resource-name">{{
            data.get(search.key)[0].resourceName
        }}</span>
        <span>{{ data.get(search.key).length }}</span>
      </div>
      <ul>
        <li
          *ngFor="let result of data.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 | highlightWord
          }}</span>
        </li>
      </ul>
    </div>
  </div>
</div>
