<templates>
  <t t-name="o-spreadsheet-BubbleChartDesignPanel">
    <GeneralDesignEditor t-props="this.props">
      <t t-set-slot="general-extension">
        <ChartLegend t-props="this.props" isDisabled="this.colorMode == 'single'"/>
        <Section class="'o-vertical-axis-selection pt-0'" title.translate="Vertical axis position">
          <RadioSelection
            choices="this.axisChoices"
            selectedValue="this.verticalAxisPosition"
            name="'axis'"
            onChange.bind="this.updateVerticalAxisPosition"
          />
        </Section>
        <Section class="'pt-0'" title.translate="Values">
          <ChartShowValues t-props="this.props"/>
        </Section>
      </t>
    </GeneralDesignEditor>
    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Bubble chart design">
      <t t-set-slot="content">
        <Section class="'pt-0'" title.translate="Color mode">
          <RadioSelection
            choices="this.colorModeChoices"
            selectedValue="this.colorMode"
            name="'bubble-color-mode'"
            onChange.bind="this.onColorModeChange"
          />
          <Checkbox
            name="'areBubblesTransparent'"
            value="this.areBubblesTransparent"
            onChange.bind="this.updateBubbleTransparency"
            className="'w-100 pt-2'"
            label.translate="Show semi-transparent bubbles"
          />
        </Section>
        <Section t-if="this.colorMode == 'single'" class="'pt-0'" title.translate="Bubble color">
          <RoundColorPicker
            currentColor="this.currentBubbleColor"
            onColorPicked.bind="this.updateBubbleColor"
          />
        </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>
