<div [hidden]="!heapObject">
  <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">{{instructionName}}</div>
            <div class="info-header-subheader">{{opcode}}</div>
          </div>
        </div>
      </div>
      <div class="info-content">
        <div class="info" id="graph-viewer-link" [hidden]="!hasValidGraphViewerLink()">
          <a [href]="getGraphViewerLink()" 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" [hidden]="!size">
          <div class="title">Size: </div>
          <div>{{size}} MiB</div>
        </div>
        <div class="info" [hidden]=!unpaddedSize>
          <div class="title">Unpadded Size: </div>
          <div>{{unpaddedSize}} MiB</div>
        </div>
        <div class="info" [hidden]="!padding">
          <div class="title">Extra memory due to padding: </div>
          <div>{{padding}} MiB</div>
        </div>
        <div class="info" [hidden]="!expansion">
          <div class="title">Expansion: </div>
          <div>
            <span>{{expansion}}</span>
            <span class="title">X</span>
          </div>
        </div>
        <div class="info" [hidden]="!shape">
          <div class="title">Shape and <a href="https://openxla.org/xla/shapes#minor-to-major_dimension_ordering" target="_blank">minor-to-major order</a>: </div>
          <div>{{shape}}</div>
        </div>
        <div class="info" [hidden]="!tfOpName">
          <div class="title">Framework Op: </div>
          <div>{{tfOpName}}</div>
        </div>
        <div class="info" [hidden]="!groupName">
          <div class="title">Allocation Type: </div>
          <div>{{groupName}}</div>
        </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>
