<templates>
  <t t-name="o-spreadsheet-Grid">
    <div
      class="o-grid w-100 h-100 o-zoomable"
      tabindex="-1"
      composerFocusableElement="true"
      t-on-click="this.focusDefaultElement"
      t-on-keydown="this.onKeydown"
      t-on-wheel.prevent="this.onMouseWheel"
      t-ref="this.gridRef">
      <div class="position-absolute" t-att-style="this.gridOverlayDimensions">
        <FiguresContainer/>
      </div>
      <GridOverlay
        onCellClicked.bind="this.onCellClicked"
        onCellDoubleClicked.bind="this.onCellDoubleClicked"
        onCellRightClicked.bind="this.onCellRightClicked"
        onGridResized.bind="this.onGridResized"
        gridOverlayDimensions="this.gridOverlayDimensions"
      />
      <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
      <GridComposer
        gridDims="this.viewStore.viewports.getSheetViewDimensionWithHeaders()"
        onInputContextMenu.bind="this.onInputContextMenu"
      />
      <div class="os-canvas-background">
        <canvas t-ref="this.canvasRef" class="os-theme-dependant pe-none"/>
      </div>
      <t t-set="focused" t-value="this.focusedClients"/>
      <t t-foreach="this.clientsToDisplay" t-as="client" t-key="this.getClientPositionKey(client)">
        <ClientTag
          name="client.name"
          color="client.color"
          col="client.position.col"
          row="client.position.row"
          active="this.isCellHovered(client.position.col, client.position.row) || focused.has(client.id)"
        />
      </t>
      <GridPopover
        t-if="!this.menuState.isOpen"
        gridRect="this.getGridRect()"
        onMouseWheel.bind="this.onMouseWheel"
        onClosePopover.bind="this.onClosePopover"
      />
      <t t-if="this.env.model.getters.isGridSelectionActive() and !this.env.isMobile()">
        <Autofill position="this.getAutofillPosition()" isVisible="this.isAutofillVisible"/>
      </t>
      <t t-foreach="this.highlights" t-as="highlight" t-key="highlight_index">
        <t
          t-if="highlight.interactive and highlight.range.sheetId === this.env.model.getters.getActiveSheetId()">
          <Highlight range="highlight.range" color="highlight.color"/>
        </t>
      </t>
      <Selection t-if="this.displaySelectionHandler"/>
      <MenuPopover
        t-if="this.menuState.isOpen"
        menuItems="this.menuState.menuItems"
        anchorRect="this.menuState.anchorRect"
        onClose="() => this.closeMenu()"
      />
      <t
        t-if="this.displayTableResizer"
        t-foreach="this.staticTables"
        t-as="table"
        t-key="table.id">
        <TableResizer table="table"/>
      </t>
      <VerticalScrollBar topOffset="this.HEADER_HEIGHT"/>
      <HorizontalScrollBar leftOffset="this.HEADER_WIDTH"/>
      <div class="o-scrollbar corner border-top border-start"/>
    </div>
  </t>
</templates>
