<templates>
  <t t-name="o-spreadsheet-CalendarChartDesignPanel">
    <GeneralDesignEditor t-props="this.props">
      <t t-set-slot="general-extension">
        <Section class="'pt-0'" title.translate="Legend position">
          <Select
            selectedValue="this.props.definition.legendPosition ?? 'left'"
            values="this.legendValues"
            class="'o-chart-legend-position'"
            onChange.bind="this.updateLegendPosition"
          />
        </Section>
        <Section class="'pt-0'" title.translate="Values">
          <ChartShowValues t-props="this.props"/>
        </Section>
      </t>
    </GeneralDesignEditor>
    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Calendar chart options">
      <t t-set-slot="content">
        <ColorScalePicker
          definition="this.props.definition"
          onUpdateColorScale.bind="this.onColormapChange"
        />
        <Section class="'pt-0 o-missing-value'" title.translate="Missing value color">
          <RoundColorPicker
            currentColor="this.selectedMissingValueColor"
            onColorPicked.bind="this.updateMissingValueColor"
          />
        </Section>
      </t>
    </SidePanelCollapsible>
    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Axes">
      <t t-set-slot="content">
        <AxisDesignEditor
          axesList="this.axesList"
          chartId="this.props.chartId"
          definition="this.props.definition"
          updateChart="this.props.updateChart"
        />
      </t>
    </SidePanelCollapsible>
    <ChartAnnotation t-props="this.props"/>
  </t>
</templates>
