<templates>
  <t t-name="o-spreadsheet-HeaderGroup">
    <div
      class="o-header-group position-absolute"
      t-att-style="this.groupBoxStyle"
      t-att-data-id="this.props.group.start + '-' + this.props.group.end"
      t-on-click="this.toggleGroup"
      t-on-contextmenu.stop.prevent="this.onContextMenu">
      <div
        class="o-header-group-header position-absolute d-flex align-items-center justify-content-center overflow-hidden"
        t-att-style="this.groupHeaderStyle">
        <div
          class="o-group-fold-button user-select-none rounded d-flex align-items-center justify-content-center"
          t-att-style="this.groupButtonStyle">
          <t t-call="{{this.groupButtonIcon}}"/>
        </div>
      </div>
      <div
        class="o-group-border position-absolute"
        t-if="!this.isGroupFolded"
        t-att-style="this.groupBorderStyle"
      />
    </div>
  </t>
</templates>
