<app-breadcrumb [path]="routes.SEARCH_RESULT"></app-breadcrumb>

<div class="tool-box">
  <div class="time-selects-wrapper">
    <app-type-item-select></app-type-item-select>
    <app-time-period-select></app-time-period-select>
  </div>

  <div class="view-mode-wrapper">
    <span class="view-mode-title">View</span>
    <mat-button-toggle-group>
    <mat-button-toggle value="left" [checked]="true">
      <mat-icon>format_align_justify</mat-icon>
    </mat-button-toggle>
    <mat-button-toggle value="right">
      <mat-icon>border_all</mat-icon>
    </mat-button-toggle>
    </mat-button-toggle-group>
  </div>
</div>

<p class="result-title">About 94 700 000 (0.39 sec.) results</p>

<div class="result-wrapper">
  <div class="result-items-wrapper">
    @for (result of (searchResults$ | async); track result) {
      <app-search-result-item [result]="result"></app-search-result-item>
    }
  </div>
  <div class="result-filtering-wrapper">
    <app-result-filtering></app-result-filtering>
  </div>
</div>
