<templates>
  <t t-name="o-spreadsheet-SpreadsheetDashboard">
    <div class="o-dashboard-background os-canvas-background position-absolute w-100 h-100 z-0">
      <div
        class="o-dashboard-sheet-background w-100 h-100 os-theme-dependant"
        t-att-style="this.backgroundStyle"
      />
    </div>
    <div
      class="o-grid o-dashboard-grid o-two-columns o-zoomable z-1"
      tabindex="-1"
      t-on-wheel="this.onMouseWheel"
      t-att-style="this.dashboardStyle">
      <div
        class="mx-auto h-100 position-relative"
        t-ref="this.gridRef"
        t-att-style="this.gridContainer">
        <div class="position-absolute" t-att-style="this.gridOverlayDimensions">
          <FiguresContainer/>
        </div>
        <GridOverlay
          onGridResized.bind="this.onGridResized"
          gridOverlayDimensions="this.gridOverlayDimensions">
          <ClickableCellsOverlay/>
        </GridOverlay>
        <canvas t-ref="this.canvasRef" class="os-theme-dependant"/>
        <GridPopover
          gridRect="this.getGridRect()"
          onMouseWheel.bind="this.onMouseWheel"
          onClosePopover.bind="this.onClosePopover"
        />
      </div>
      <VerticalScrollBar/>
      <HorizontalScrollBar/>
      <div class="o-scrollbar corner"/>
    </div>
  </t>
</templates>
