<templates>
  <t t-name="o-spreadsheet-HeadersOverlay">
    <div class="o-overlay">
      <ColResizer onOpenContextMenu="this.props.onOpenContextMenu"/>
      <RowResizer onOpenContextMenu="this.props.onOpenContextMenu"/>
      <div class="all" t-on-pointerdown.self="this.selectAll"/>
    </div>
  </t>

  <t t-name="o-spreadsheet-RowResizer">
    <div
      class="o-row-resizer o-zoomable"
      t-ref="this.rowResizerRef"
      t-on-pointermove.self="this.onMouseMove"
      t-on-mouseleave="this.onMouseLeave"
      t-on-pointerdown.self.prevent="this.select"
      t-on-click="this.onClick"
      t-on-contextmenu.self="this.onContextMenu"
      t-att-class="{'o-grab': this.state.waitingForMove, 'o-dragging': this.state.isMoving}">
      <div
        t-if="this.state.isMoving"
        class="dragging-row-line"
        t-attf-style="top:{{this.state.draggerLinePosition}}px;"
      />
      <div
        t-if="this.state.isMoving"
        class="dragging-row-shadow"
        t-attf-style="top:{{this.state.draggerShadowPosition}}px; height:{{this.state.draggerShadowThickness}}px;"
      />
      <t t-if="this.state.resizerIsActive">
        <div
          class="o-handle"
          t-on-pointerdown="this.onMouseDown"
          t-on-dblclick="this.onDblClick"
          t-attf-style="top:{{this.state.draggerLinePosition - 2}}px;">
          <div class="dragging-resizer" t-if="this.state.isResizing"/>
        </div>
      </t>
      <t t-if="this.env.model.getters.getHiddenRowsGroups(this.sheetId).length">
        <t t-if="this.hasFrozenPane">
          <div
            class="position-relative pe-none overflow-hidden"
            t-att-style="this.frozenContainerStyle">
            <UnhideRowHeaders t-props="this.frozenUnhideHeadersProps"/>
          </div>
        </t>
        <div class="pe-none overflow-hidden flex-shrink-0 position-relative h-100">
          <UnhideRowHeaders t-props="this.mainUnhideHeadersProps"/>
        </div>
      </t>
    </div>
  </t>

  <t t-name="o-spreadsheet-ColResizer">
    <div
      class="o-col-resizer d-flex o-zoomable"
      t-ref="this.colResizerRef"
      t-on-pointermove.self="this.onMouseMove"
      t-on-mouseleave="this.onMouseLeave"
      t-on-pointerdown.self.prevent="this.select"
      t-on-click="this.onClick"
      t-on-contextmenu.self="this.onContextMenu"
      t-att-class="{'o-grab': this.state.waitingForMove, 'o-dragging': this.state.isMoving, }">
      <div
        t-if="this.state.isMoving"
        class="dragging-col-line"
        t-attf-style="left:{{this.state.draggerLinePosition}}px;"
      />
      <div
        t-if="this.state.isMoving"
        class="dragging-col-shadow"
        t-attf-style="left:{{this.state.draggerShadowPosition}}px; width:{{this.state.draggerShadowThickness}}px"
      />
      <t t-if="this.state.resizerIsActive">
        <div
          class="o-handle"
          t-on-pointerdown="this.onMouseDown"
          t-on-dblclick="this.onDblClick"
          t-attf-style="left:{{this.state.draggerLinePosition - 2}}px;">
          <div class="dragging-resizer" t-if="this.state.isResizing"/>
        </div>
      </t>
      <t t-if="this.env.model.getters.getHiddenColsGroups(this.sheetId).length">
        <t t-if="this.hasFrozenPane">
          <div
            class="position-relative pe-none h-100 flex-shrink-0"
            t-att-style="this.frozenContainerStyle">
            <UnhideColumnHeaders t-props="this.frozenUnhideHeadersProps"/>
          </div>
        </t>
        <div class="pe-none overflow-hidden flex-shrink-0 position-relative w-100">
          <UnhideColumnHeaders t-props="this.mainUnhideHeadersProps"/>
        </div>
      </t>
    </div>
  </t>
</templates>
