<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"
    >
    @if (estimatedFrameRate >= 60 && record) {
      <label>
        Time spent: <span class="value">{{ record?.duration | number }} ms</span>
      </label>
    }
    @if (estimatedFrameRate < 60 && record) {
      <label class="warning-label">
        Time spent: <span class="value">{{ record?.duration | number }} ms</span>
      </label>
    }
    @if (estimatedFrameRate < 60 && record) {
      <label class="warning-label">
        Frame rate: <span class="value">{{ estimatedFrameRate }} fps</span>
      </label>
    }
    @if (record?.source && record) {
      <label>
        Source: <span class="value">{{ record?.source }}</span>
      </label>
    }
    @if (visualizationMode == flameGraphMode) {
      <mat-checkbox
        [checked]="changeDetection"
        (change)="this.toggleChangeDetection.emit(!changeDetection)"
        >
        Show only change detection
      </mat-checkbox>
    }
  </div>
  @if (!empty) {
    <button mat-stroked-button (click)="exportProfile.emit()">Save Profile</button>
  }
</div>
