<templates>
  <t t-name="o-spreadsheet-Spreadsheet">
    <div
      class="o-spreadsheet h-100 w-100"
      t-att-class="this.getSpreadSheetClasses()"
      t-ref="this.spreadsheetRef"
      t-att-style="this.getStyle()">
      <t t-if="this.state.printModeEnabled">
        <SpreadsheetPrint onExitPrintMode.bind="this.exitPrintMode"/>
      </t>
      <t t-elif="this.env.model.getters.isDashboard()">
        <SpreadsheetDashboard getGridSize.bind="this.getGridSize"/>
        <FullScreenFigure/>
      </t>
      <t t-else="">
        <div class="o-spreadsheet-topbar-wrapper o-two-columns">
          <TopBar onClick="() => this.focusGrid()" dropdownMaxHeight="this.gridHeight"/>
        </div>
        <div
          class="o-grid-container"
          t-att-class="{'o-two-columns': !this.sidePanel.isMainPanelOpen}"
          t-att-style="this.gridContainerStyle"
          t-on-click="this.focusGrid">
          <div class="o-top-left"/>
          <div class="o-column-groups o-zoomable">
            <HeaderGroupContainer layers="this.colLayers" dimension="'COL'"/>
          </div>
          <div class="o-row-groups o-zoomable">
            <HeaderGroupContainer layers="this.rowLayers" dimension="'ROW'"/>
          </div>
          <div class="o-group-grid overflow-hidden">
            <Grid
              exposeFocus="(focus) => this._focusGrid = focus"
              getGridSize.bind="this.getGridSize"
            />
          </div>
        </div>
        <SidePanels/>
        <div class="o-spreadsheet-bottombar-wrapper o-two-columns overflow-hidden border-top">
          <SmallBottomBar t-if="this.env.isSmall" onClick="() => this.focusGrid()"/>
          <BottomBar t-else="" onClick="() => this.focusGrid()"/>
        </div>
      </t>
    </div>
  </t>
</templates>
