<div class="controls">
  <div class="visual-controls">
    <mat-form-field>
      <mat-label>Filter</mat-label>
      <input
        matInput
        class="filter-input"
        (keyup)="filter.emit($event.target.value)"
        placeholder="duration: >30 source: click"
      />
    </mat-form-field>

    <mat-form-field [class.hidden]="!record">
      <mat-select [value]="visualizationMode" (selectionChange)="this.changeVisualizationMode.emit($event.value)">
        <mat-option [value]="flameGraphMode"> Flame graph </mat-option>
        <mat-option [value]="treeMapMode"> Tree map </mat-option>
        <mat-option [value]="barGraphMode"> Bar chart </mat-option>
      </mat-select>
    </mat-form-field>
  </div>

  <div
    class="details"
    [class.flame-details]="visualizationMode == flameGraphMode"
    [class.bar-details]="visualizationMode == barGraphMode"
  >
    <label *ngIf="estimatedFrameRate >= 60 && record">
      Time spent: <span class="value">{{ record?.duration | number }} ms</span>
    </label>

    <label class="warning-label" *ngIf="estimatedFrameRate < 60 && record">
      Time spent: <span class="value">{{ record?.duration | number }} ms</span>
    </label>

    <label class="warning-label" *ngIf="estimatedFrameRate < 60 && record">
      Frame rate: <span class="value">{{ estimatedFrameRate }} fps</span>
    </label>

    <label *ngIf="record?.source && record">
      Source: <span class="value">{{ record?.source }}</span>
    </label>

    <mat-checkbox
      *ngIf="visualizationMode == flameGraphMode"
      [checked]="changeDetection"
      (change)="this.toggleChangeDetection.emit(!changeDetection)"
    >
      Show only change detection
    </mat-checkbox>
  </div>

  <button *ngIf="!empty" mat-stroked-button (click)="exportProfile.emit()">Save Profile</button>
</div>
