<mat-sidenav-container>
  <mat-sidenav mode="side" opened>
    <ng-content select="[opDetails]"></ng-content>
  </mat-sidenav>
  <mat-sidenav-content>
    <as-split direction="vertical">
    <as-split-area [size]="80">
    <div class="container" tabindex="0">
      <div class="mat-headline">
        <div>
          Overall {{deviceType}} FLOPS utilization is
          <span [style.color]="data.flopsColor">{{data.flopsUtilizationPercent}}</span>
        </div>
        <div>
          Memory bandwidth utilizations:
          <span *ngFor="let metric of summary">{{metric.name}} <span [style.color]="metric.color">{{metric.value}}</span></span>
        </div>
      </div>
      <div class="description">
        <div>
          Modifying your model's architecture, data dimensions, and improving
          the efficiency of CPU operations may help reach the {{deviceType}}'s FLOPS
          potential.
        </div>
        <div>
          "IDLE" represents the portion of the total execution time on device
          that is idle.
        </div>
      </div>
      <div class="control-container">
        <!-- <div class="control" [hidden]="!hasMultiModules"> -->
          <div class="control">
          <mat-form-field appearance="outline">
            <mat-label>Group by</mat-label>
            <mat-select [value]="groupBy" (selectionChange)="updateGroupBy($event.value)">
              <mat-option *ngFor="let rule of GROUP_BY_RULES" [value]="rule">{{rule | titlecase}}</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="control">
          <div class="control-title">
            Order by wasted time
            <mat-icon
              class="tooltip-icon"
              matTooltip="Wasted time is defined by RuntimeFraction *(1 - max(FlopsUtilization, MemoryBandwidthUtilization))."
              matTooltipPosition="above">
              info
            </mat-icon>
          </div>
          <mat-slide-toggle [checked]="byWasted" (toggleChange)="updateByWasted()" matTooltip="Order by Time% by default."></mat-slide-toggle>
        </div>
        <div class="control" *ngIf="hasValidTimeScaleMultiplier()">
          <div class="control-title">
            Dvfs Scaled Flops Util
            <mat-icon
              class="tooltip-icon"
              matTooltip="Apply dvfs scaling factor to get the actual flops utilization based on the evaluated device capabilities(due to pstate changes)."
              matTooltipPosition="above">
              info
            </mat-icon>
          </div>
          <mat-slide-toggle [checked]="applyScalingFactor" (toggleChange)="toggleScalingFactor()"></mat-slide-toggle>
        </div>
        <div class="control">
          <div class="control-title">Top 90%
            <mat-icon
              class="tooltip-icon"
              matTooltip="Ops will be capped by the limit."
              matTooltipPosition="above">
              info
            </mat-icon>
          </div>
          <mat-slide-toggle [checked]="showP90" (toggleChange)="updateShowP90()"></mat-slide-toggle>
        </div>
        <div class="control">
          <div class="control-title">Exclude Idle</div>
          <mat-slide-toggle [checked]="excludeIdle" (toggleChange)="updateExcludeIdle()"></mat-slide-toggle>
        </div>
        <div class="control" *ngIf="sourceCodeServiceIsAvailable">
          <div class="control-title">Show Source Code
            <mat-icon
              class="tooltip-icon"
              matTooltip="Show snippets of source code around frames of the stack trace (available only in the new analysis)."
              matTooltipPosition="above">
              info
            </mat-icon>
          </div>
          <mat-slide-toggle [checked]="showStackTrace" (toggleChange)="updateShowStackTrace()"/>
        </div>
        <div class="control">
          <mat-form-field class="children-count-input" appearance="outline">
            <mat-label>Ops Limit</mat-label>
            <input
                  matInput
                  type="number"
                  [min]="10"
                  [max]="100"
                  [step]="10"
                  [value]="childrenCount"
                  matTooltip="Number of ops to show per layer. 10 ~ 100 with increment of 10."
                  (change)="updateChildrenCount($event)" />
          </mat-form-field>
        </div>
      </div>
    </div>

    <op-table
      #opTable
      [rootNode]="rootNode"
      [byWasted]="byWasted"
      [showP90]="showP90"
      [childrenCount]="childrenCount">
    </op-table>
    </as-split-area>
    <as-split-area [size]="20" *ngIf="sourceCodeServiceIsAvailable && showStackTrace">
      <source-mapper
        [sourceFileAndLineNumber]="sourceFileAndLineNumber"
        [stackTrace]="stackTrace"
        [sessionId]="sessionId"
        [programId]="focusedOpProgramId"
        [opName]="focusedOpName"
        [opCategory]="focusedOpCategory"/>
    </as-split-area>
    </as-split>
  </mat-sidenav-content>
</mat-sidenav-container>
