<templates>
  <t t-name="o-spreadsheet-ChartPanel">
    <div class="o-chart d-flex flex-column h-100" t-if="this.chartId">
      <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.store.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.store.panel !== 'design' ? 'inactive' : ''"
          t-on-click="this.switchPanel.bind(this, 'design')">
          <i class="oi me-2" data-icon="design_services"/>
          Design
        </div>
      </div>

      <t t-set="definition" t-value="this.getChartDefinition(this.chartId)"/>
      <div class="o-panel-content h-100 overflow-y-hidden">
        <div class="h-100" t-att-class="this.store.panel !== 'configuration' ? 'd-none' : ''">
          <div class="h-100 overflow-y-auto">
            <ChartTypePicker chartId="this.chartId" chartPanelStore="this.store"/>
            <t
              t-component="this.chartPanel.configuration"
              definition="definition"
              chartId="this.chartId"
              updateChart.bind="this.updateChart"
              canUpdateChart.bind="this.canUpdateChart"
              t-key="this.chartId + definition.type"
            />
          </div>
        </div>
        <div class="h-100" t-att-class="this.store.panel !== 'design' ? 'd-none' : ''">
          <div class="h-100 overflow-y-auto">
            <t
              t-component="this.chartPanel.design"
              definition="definition"
              chartId="this.chartId"
              updateChart.bind="this.updateChart"
              canUpdateChart.bind="this.canUpdateChart"
              t-key="this.chartId + definition.type"
            />
          </div>
        </div>
      </div>
    </div>
  </t>
</templates>
