@if (canvasMode) {
  <div
    id="godley-cairo-canvas-wrapper"
    #godleyCanvasElemWrapper
    (window:resize)="windowResize()"
    >
    <div id="godley-cairo-canvas" class="godley-cairo-canvas">
      <p>&nbsp;</p>
    </div>
  </div>
}

@if (!canvasMode && htmlModeReady) {
  <div class="table-wrapper" (mousewheel)=changeScale($event)>
    <div class="table" [style.zoom]="scale.zoomFactor">
      <div class="table-row asset-classes-row">
        <div class="data-cell narrow"></div>
        <div class="data-cell wide"></div>
        @for (columnVariable of columnVariables; track columnVariable; let i = $index) {
          <div class="data-cell asset-class-header assets-header" [class.firstOfClass]="columnVariable.firstOfClass" [class.lastOfClass]="columnVariable.lastOfClass">
            @if (columnVariable.firstOfClass && columnVariable.assetClass === 'asset') {
              <span class="assets-header">Assets</span>
            }
            @if (columnVariable.firstOfClass && columnVariable.assetClass === 'liability') {
              <span class="liabilities-header">Liabilities</span>
            }
            @if (columnVariable.firstOfClass && columnVariable.assetClass === 'equity') {
              <span class="equity-header">Equity</span>
            }
          </div>
        }
        <div class="data-cell asset-class-header ale-header firstOfClass">
          A-L-E
        </div>
      </div>
      <div class="table-row actions-row">
        <div class="data-cell narrow"></div>
        <div class="data-cell wide"></div>
        @for (columnVariable of columnVariables; track columnVariable; let j = $index) {
          <div class="data-cell buttons-cell" [class.firstOfClass]="columnVariable.firstOfClass" [class.lastOfClass]="columnVariable.lastOfClass">
            @if (!((columnVariable.assetClass === 'equity') && !multiEquityAllowed)) {
              <div class="small-button add-button" (click)="onColumnAdd(j)"><span class="material-icons">add</span></div>
              <div class="small-button remove-button" (click)="onColumnDelete(j)"><span class="material-icons">remove</span></div>
              @if (j > 0) {
                <div class="small-button" (click)="onColumnMove(j, -1)"><span class="material-icons">arrow_back</span></div>
              }
              @if (j < columnVariables.length - 1 && !(!multiEquityAllowed && columnVariable.assetClass === 'liability' && columnVariable.lastOfClass)) {
                <div class="small-button" (click)="onColumnMove(j, 1)">
                  <span class="material-icons">arrow_forward </span>
                </div>
              }
            }
          </div>
        }
        <div class="data-cell firstOfClass"></div>
      </div>
      <div class="table-row header-row">
        <div class="data-cell narrow"></div>
        <div class="data-cell wide">Flows <span class="arrow-icon">↓</span> / Stock Vars <span class="arrow-icon">→</span></div>
        @for (columnVariable of columnVariables; track columnVariable; let j = $index) {
          <div class="data-cell colvar-header-cell" id="dataCell0_{{j+1}}" [class.firstOfClass]="columnVariable.firstOfClass" [class.lastOfClass]="columnVariable.lastOfClass" (contextmenu)="contextMenu(0, j+1, 'row0')">
            @if (!isCellEditing(0, j+1)) {
              <span class="colvar-header latex-cell" (click)="onCellFocus(0, j+1, $event)" latex [title]="cellValues[0][j+1]" [equation]="cellValues[0][j+1]" [latexScale]="0.9"></span><span class="colvar-triangle" (click)="onWedgeClick(j+1, $event)">▼</span>
            }
            @if (isCellEditing(0, j+1)) {
              <input type="text" [(ngModel)]="cellValues[0][j+1]" (keydown)="inputKeyup($event)" (blur)="delayedFinishEditing()"/>
            }
          </div>
        }
        <div class="data-cell firstOfClass"></div>
      </div>
      <div class="table-row initial-row">
        <div class="data-cell narrow buttons-cell">
          <div class="small-button add-button" (click)="onRowAdd(-1)"><span class="material-icons">add</span></div>
        </div>
        <div class="data-cell wide">Initial Conditions</div>
        @for (columnVariable of columnVariables; track columnVariable; let j = $index) {
          <div class="data-cell" id="dataCell1_{{j+1}}" [class.firstOfClass]="columnVariable.firstOfClass" [class.lastOfClass]="columnVariable.lastOfClass" (contextmenu)="contextMenu(1, j+1, undefined)">
            <input type="text" [(ngModel)]="cellValues[1][j+1]" (click)="$event.stopPropagation()" (focus)="onCellFocus(1, j+1, $event, false)" (keydown)="inputKeyup($event)" (blur)="delayedFinishEditing()"/>
          </div>
        }
        <div class="data-cell firstOfClass ale-cell">
          <span class="latex-cell" latex [equation]="rowSums[0]" [latexScale]="0.9"></span>
        </div>
      </div>
      @for (flow of flows; track flow; let i = $index) {
        <div class="table-row">
          <div class="data-cell narrow buttons-cell">
            <div class="small-button add-button" (click)="onRowAdd(i)"><span class="material-icons">add</span></div>
            <div class="small-button remove-button" (click)="onRowDelete(i)"><span class="material-icons">remove</span></div>
            @if (i > 0) {
              <div class="small-button" (click)="onRowMove(i, -1)"><span class="material-icons">arrow_upward</span></div>
            }
            @if (i < flows.length - 1) {
              <div class="small-button" (click)="onRowMove(i, 1)"><span class="material-icons">arrow_downward</span></div>
            }
          </div>
          <div [title]="flow.name" id="dataCell{{i+2}}_0" class="data-cell wide" (contextmenu)="contextMenu(i+2, 0, 'col0')">
            @if (!isCellEditing(i+2, 0)) {
              <span (click)="onCellFocus(i+2, 0, $event)" class="latex-cell" latex [title]="cellValues[i+2][0]" [equation]="cellValues[i+2][0]" [replaceSpaces]="true" [latexScale]="0.9"></span>
            }
            @if (isCellEditing(i+2, 0)) {
              <input (click)="$event.stopPropagation()" type="text" [(ngModel)]="cellValues[i+2][0]" (keydown)="inputKeyup($event)" (blur)="delayedFinishEditing()"/>
            }
          </div>
          @if (cellValues) {
            @for (columnVariable of columnVariables; track columnVariable; let j = $index) {
              <div id="dataCell{{i+2}}_{{j+1}}" class="data-cell" [class.firstOfClass]="columnVariable.firstOfClass" [class.lastOfClass]="columnVariable.lastOfClass" (contextmenu)="contextMenu(i+2, j+1, 'internal')">
                @if (!isCellEditing(i+2, j+1)) {
                  <span (click)="onCellFocus(i+2, j+1, $event)" class="latex-cell" [class.negative]="cellValues[i+2][j+1].startsWith('-')" latex [title]="cellValues[i+2][j+1]" [equation]="cellValues[i+2][j+1]" [latexScale]="0.9"></span>
                }
                @if (isCellEditing(i+2, j+1)) {
                  <input (click)="$event.stopPropagation()" type="text" [(ngModel)]="cellValues[i+2][j+1]" (keydown)="inputKeyup($event)" (blur)="delayedFinishEditing()"/>
                }
              </div>
            }
          }
          <div class="data-cell firstOfClass ale-cell">
            <span class="latex-cell" latex [equation]="rowSums[i + 1]" [latexScale]="0.9"></span>
          </div>
        </div>
      }
    </div>
  </div>
}