<templates>
  <t t-name="o-spreadsheet-HeaderGroupContainer">
    <div
      class="o-header-group-container d-flex w-100 h-100 overflow-hidden"
      t-att-class="{
        'flex-column': this.props.dimension === 'ROW',
        'flex-row': this.props.dimension === 'COL',
      }"
      t-if="this.props.layers.length"
      t-on-contextmenu.prevent="this.onContextMenu">
      <div
        class="o-header-group-frozen-pane flex-shrink-0 overflow-hidden position-relative"
        t-att-class="{
          'o-group-rows': this.props.dimension === 'ROW',
          'o-group-columns': this.props.dimension === 'COL',
        }"
        t-if="this.hasFrozenPane"
        t-att-style="this.frozenPaneContainerStyle">
        <t t-foreach="this.props.layers" t-as="layer" t-key="layer_index">
          <t t-foreach="layer" t-as="group" t-key="group.start + '-' + group.end">
            <t
              t-component="this.groupComponent"
              group=" group"
              layerOffset="this.getLayerOffset(layer_index)"
              openContextMenu.bind="this.openContextMenu"
            />
          </t>
        </t>
      </div>
      <div
        class="o-header-group-frozen-pane-border"
        t-att-class="{
          'o-group-rows': this.props.dimension === 'ROW',
          'o-group-columns': this.props.dimension === 'COL',
        }"
        t-if="this.hasFrozenPane"
      />

      <div
        class="o-header-group-main-pane flex-shrink-0 position-relative h-100 w-100 overflow-hidden"
        t-att-class="{
          'o-group-rows': this.hasFrozenPane and this.props.dimension === 'ROW',
          'o-group-columns': this.hasFrozenPane and this.props.dimension === 'COL',
        }">
        <div
          class="o-header-group-scroll-container position-relative"
          t-att-style="this.scrollContainerStyle">
          <t t-foreach="this.props.layers" t-as="layer" t-key="layer_index">
            <t t-foreach="layer" t-as="group" t-key="group.start + '-' + group.end">
              <t
                t-component="this.groupComponent"
                group="group"
                layerOffset="this.getLayerOffset(layer_index)"
                openContextMenu.bind="this.openContextMenu"
              />
            </t>
          </t>
        </div>
      </div>

      <MenuPopover
        t-if="this.menu.isOpen"
        menuItems="this.menu.menuItems"
        anchorRect="this.menu.anchorRect"
        onClose.bind="this.closeMenu"
      />
    </div>
  </t>
</templates>
