<templates>
  <t t-name="o-spreadsheet-PivotSidePanel">
    <div class="o-pivot-panel d-flex flex-column h-100">
      <div class="o-panel d-flex">
        <div
          class="o-sidePanel-tab o-panel-configuration d-flex flex-grow-1 justify-content-center"
          t-att-class="this.state.panel !== 'configuration' ? 'inactive' : ''"
          t-on-click="this.switchPanel.bind(this, 'configuration')">
          <i class="oi me-2" data-icon="tune"/>
          Configuration
        </div>
        <div
          class="o-sidePanel-tab o-panel-design d-flex flex-grow-1 justify-content-center"
          t-att-class="this.state.panel !== 'design' ? 'inactive' : ''"
          t-on-click="this.switchPanel.bind(this, 'design')">
          <i class="oi me-2" data-icon="design_services"/>
          Design
        </div>
      </div>

      <div class="o-panel-content overflow-hidden h-100">
        <div class="h-100" t-att-class="this.state.panel !== 'configuration' ? 'd-none' : ''">
          <t
            t-component="this.sidePanelEditor"
            pivotId="this.props.pivotId"
            onCloseSidePanel="this.props.onCloseSidePanel"
          />
        </div>
        <div class="h-100" t-att-class="this.state.panel !== 'design' ? 'd-none' : ''">
          <PivotDesignPanel pivotId="this.props.pivotId"/>
        </div>
      </div>
    </div>
  </t>
</templates>
