<!-- Copyright 2018 The Flutter Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->

<div *ngIf="isLoading" style="position: fixed; top: 0; left: 0; z-index: 1000; background-color: #AAFFAA;">Loading...</div>

<div style="margin: 5px;">
  <button id="toggleArchived" (click)="toggleArchived()">{{isShowArchived ? "Hide" : "Show"}} Archived</button>
  <input type="text" [(ngModel)]="taskTextFilter" placeholder="Filter visible benchmarks"/>&nbsp;
  <material-dropdown-select
    buttonText="{{selectedValue}}"
    [(selection)]="selectedValue"
    [options]="values">
  </material-dropdown-select>
</div>

<div *ngIf="zoomInto != null" class="benchmark-history-container">
  <benchmark-history
      [userIsAuthenticated]="userIsAuthenticated"
      [timeseriesKey]="zoomInto.timeseries.key">
  </benchmark-history>
  <button (click)="zoomInto = null">Close History</button>
</div>

<div *ngIf="visibleBenchmarks != null" class="card-container">
    <benchmark-card
        class="short-benchmark-card"
        *ngFor="let benchmark of visibleBenchmarks"
        [data]="benchmark"
        (onZoomIn)="zoomInto = benchmark">
    </benchmark-card>
</div>