<templates>
  <t t-name="o-spreadsheet-FunnelChartDesignPanel">
    <GeneralDesignEditor t-props="this.props">
      <t t-set-slot="general-extension">
        <Section class="'pt-0'" title.translate="Values">
          <ChartShowValues t-props="this.props"/>
        </Section>
        <Section class="'pt-0'" title.translate="Number formatting">
          <ChartHumanizeNumbers t-props="this.props"/>
        </Section>
      </t>
    </GeneralDesignEditor>

    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Funnel options">
      <t t-set-slot="content">
        <Section class="'o-funnel-colors pt-0'" title.translate="Funnel colors">
          <t t-foreach="this.getFunnelColorItems()" t-as="item" t-key="item_index">
            <div class="d-flex align-items-center mb-2" t-att-data-id="item_index">
              <RoundColorPicker
                currentColor="item.color"
                onColorPicked="(color) => this.updateFunnelItemColor(item_index, color)"
              />
              <span class="ps-2" t-out="item.label"/>
            </div>
          </t>
        </Section>
      </t>
    </SidePanelCollapsible>
    <ChartAnnotation t-props="this.props"/>
  </t>
</templates>
