<div [hidden]="!node" tabindex="0">
  <mat-card>
    <mat-card-content>
      <div class="info-header">
        <div class="info-header-circle" [style.background]="color"></div>
        <div class="info-header-content-container">
          <div class="info-header-content">
            <div class="info-header-title">{{name}}</div>
            <div class="info-header-subheader">{{subheader}}</div>
          </div>
        </div>
      </div>
      <div class="info-content">
        <div class="info" id="graph-viewer-link" [hidden]="!graphViewerLink">
          <a [href]="graphViewerLink" target="_blank" style="text-decoration:none;">
            <button
              mat-stroked-button
              extended
              type="button"
              color="primary"
              appearance="fill"
              aria-label="go to graph viewer"
              i18n-aria-label="A button to corresponding graph viewer page">
             > Graph Viewer
            </button>
          </a>
        </div>
        <div class="info" id="custom-call-text-link" [hidden]="!isValidCustomCall">
          <a [href]="getCustomCallTextLink()" target="_blank" style="text-decoration:none;">
            <button
              mat-stroked-button
              extended
              type="button"
              color="primary"
              appearance="fill"
              aria-label="go to custom call text"
              i18n-aria-label="A button to corresponding custom call text page">
             > Custom Call Text
            </button>
          </a>
        </div>
        <div class="info" id="custom-call-regviz-link" [hidden]="!isValidCustomCall">
          <a [href]="getCustomCallRegvizLink()" target="_blank" style="text-decoration:none;">
            <button
              mat-stroked-button
              extended
              type="button"
              color="primary"
              appearance="fill"
              aria-label="go to regviz"
              i18n-aria-label="A button to corresponding regviz page">
             > Regviz
            </button>
          </a>
        </div>
        <div class="info" [hidden]="!avgTime">
          <div class="title">Total Time Avg:</div>
          <code class="expression">{{avgTime}}</code>
        </div>
        <div class="info" [hidden]="!flopsUtilization">
          <div class="title">FLOPS utilization:</div>
          <div class="bar-container">
            <div
              class="bar"
              [style.width]="flopsUtilization"
              [style.background-color]="flopsColor">
              &nbsp;{{flopsUtilization}}
            </div>
          </div>
        </div>
        <div class="info" [hidden]="!bandwidthUtilizations[memBwType.MEM_BW_TYPE_HBM_RW]">
          <div class="title">HBM bandwidth utilization:</div>
          <div class="bar-container">
            <div
              class="bar"
              [style.width]="bandwidthUtilizations[memBwType.MEM_BW_TYPE_HBM_RW]"
              [style.background-color]="bwColors[memBwType.MEM_BW_TYPE_HBM_RW]">
              &nbsp;{{bandwidthUtilizations[memBwType.MEM_BW_TYPE_HBM_RW]}}
            </div>
          </div>
        </div>
        <div class="info" [hidden]="!bandwidthUtilizations[memBwType.MEM_BW_TYPE_SRAM_RD]">
          <div class="title">On-Chip Read bandwidth utilization:</div>
          <div class="bar-container">
            <div
              class="bar"
              [style.width]="bandwidthUtilizations[memBwType.MEM_BW_TYPE_SRAM_RD]"
              [style.background-color]="bwColors[memBwType.MEM_BW_TYPE_SRAM_RD]">
              &nbsp;{{bandwidthUtilizations[memBwType.MEM_BW_TYPE_SRAM_RD]}}
            </div>
          </div>
        </div>
        <div class="info" [hidden]="!bandwidthUtilizations[memBwType.MEM_BW_TYPE_SRAM_WR]">
          <div class="title">On-Chip Write bandwidth utilization:</div>
          <div class="bar-container">
            <div
              class="bar"
              [style.width]="bandwidthUtilizations[memBwType.MEM_BW_TYPE_SRAM_WR]"
              [style.background-color]="bwColors[memBwType.MEM_BW_TYPE_SRAM_WR]">
              &nbsp;{{bandwidthUtilizations[memBwType.MEM_BW_TYPE_SRAM_WR]}}
            </div>
          </div>
        </div>
        <div class="info" [hidden]="!flopsRate" matTooltip="Raw FLOP rate." matTooltipPosition="above">
          <div class="title">{{getTitleByDeviceType('FLOP rate', ':')}}</div>
          <code class="expression">{{flopsRate}}</code>
        </div>
        <div
          class="info"
          [hidden]="!bf16FlopsRate || deviceType !== 'TPU'"
          matTooltip="Normalized FLOP rate to bf16 given the device type and operand data type."
          matTooltipPosition="above">
          <div class="title">bf16 normalized FLOP rate (per core):</div>
          <code class="expression">{{bf16FlopsRate}}</code>
        </div>
        <div class="info" [hidden]="!bandwidths[memBwType.MEM_BW_TYPE_HBM_RW]">
          <div class="title">{{getTitleByDeviceType('HBM bandwidth', ':')}}</div>
          <code class="expression">{{bandwidths[memBwType.MEM_BW_TYPE_HBM_RW]}}</code>
        </div>
        <div class="info" [hidden]="!bandwidths[memBwType.MEM_BW_TYPE_SRAM_RD]">
          <div class="title">{{getTitleByDeviceType('On-chip Read bandwidth', ':')}}</div>
          <code class="expression">{{bandwidths[memBwType.MEM_BW_TYPE_SRAM_RD]}}</code>
        </div>
        <div class="info" [hidden]="!bandwidths[memBwType.MEM_BW_TYPE_SRAM_WR]">
          <div class="title">{{getTitleByDeviceType('On-chip Write bandwidth', ':')}}</div>
          <code class="expression">{{bandwidths[memBwType.MEM_BW_TYPE_SRAM_WR]}}</code>
        </div>
        <div class="info" [hidden]="!expression">
          <div class="title">XLA expression:</div>
          <code class="expression">{{expression}}</code>
        </div>
        <div class="info" [hidden]="!provenance">
          <div class="title">Long Op Name:</div>
          <code class="expression">{{provenance}}</code>
        </div>
        <div class="info" *ngIf="xprofKernelMetadata">
          <div class="title">Xprof Kernel Metadata:</div>
          <ngx-json-viewer [json]="xprofKernelMetadata"></ngx-json-viewer>
        </div>
        <div class="info" [hidden]="!rawTimeMs">
          <div class="title">Total Time Sum:</div>
          <code class="expression">{{rawTimeMs}}</code>
        </div>
        <div class="info" [hidden]="!occurrences">
          <div class="title">Occurrences:</div>
          <code class="expression">{{occurrences}}</code>
        </div>
        <div class="info" [hidden]="!fused">
          <div class="unavailable">
            Performance information for individual fused operations is not available.
          </div>
        </div>
        <div class="info" [hidden]="!hasCategory">
          <div class="unavailable">
            Select items within this category for performace details.
          </div>
        </div>
        <div class="info" [hidden]="!hasLayout">
          <div class="title">Layout:</div>
          <div class="layout" *ngFor="let dimension of dimensions; let i = index">
            <div>
              <div class="size-x">
                <div [hidden]="!i">x</div>
              </div>
            </div>
            <div>
              <span class="size">{{dimension.size}}</span>
              <span class="semantics">{{dimension.semantics}}</span>
              <span
                    class="alignment"
                    [style.background-color]="dimensionColor(dimension)">
                {{dimensionHint(dimension)}}
              </span>
            </div>
          </div>
        </div>
        <div class="info" [hidden]="!computationPrimitiveSize">
          <div class="title"> Hardware Computation Size:</div>
          <code class="expression">{{computationPrimitiveSize}}</code>
        </div>
        <div selector="[utilWarning]" class="warning" [hidden]="!showUtilizationWarning">
          <p>Utilization may have been capped at 100% as accurate bandwidth could not be determined.</p>
          <ng-content select="[utilWarningBug]"></ng-content>
        </div>
        <div class="info" [hidden]="!sourceTopLine">
          <div class="title">Source:</div>
          <code class="expression">{{sourceTopLine}}</code>
        </div>
        <div class="info" [hidden]="!sourceStack">
          <div class="title">Source Stack:</div>
          <code class="expression">{{sourceStack}}</code>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</div>
