<templates>
  <t t-name="o-spreadsheet-GeoChartDesignPanel">
    <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 ?? 'bottom'"
            values="this.legendValues"
            class="'o-chart-legend-position'"
            onChange.bind="this.updateLegendPosition"
          />
        </Section>
        <Section class="'pt-0'" title.translate="Number formatting">
          <ChartHumanizeNumbers t-props="this.props"/>
        </Section>
      </t>
    </GeneralDesignEditor>

    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Geo chart options">
      <t t-set-slot="content">
        <ColorScalePicker
          definition="this.props.definition"
          onUpdateColorScale.bind="this.updateColorScale"
        />

        <Section class="'pt-0 o-missing-value'" title.translate="Countries without value">
          <RoundColorPicker
            currentColor="this.selectedMissingValueColor"
            onColorPicked.bind="this.updateMissingValueColor"
          />
        </Section>
      </t>
    </SidePanelCollapsible>
    <ChartAnnotation t-props="this.props"/>
  </t>
</templates>
