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

    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Sunburst options">
      <t t-set-slot="content">
        <Section class="'pt-0 o-sunburst-colors'" title.translate="Colors">
          <t t-foreach="this.groupColors" t-as="item" t-key="item.label">
            <div class="d-flex align-items-center mb-2" t-att-data-id="item.label">
              <RoundColorPicker
                currentColor="item.color"
                onColorPicked="(color) => this.onGroupColorChanged(item_index, color)"
              />
              <span class="ps-2">
                <span t-out="'(#' + (item_index +1 ) + ')'" class="o-text-bolder pe-1"/>
                <span class="text-muted" t-out="item.label"/>
              </span>
            </div>
          </t>
        </Section>
        <Section title.translate="Labels" class="'pt-0 pb-0'">
          <div class="d-flex flex-row gap-4">
            <Checkbox
              name="'showLabels'"
              label.translate="Show labels"
              value="this.showLabels"
              onChange="(showLabels) => this.props.updateChart(this.props.chartId, { showLabels })"
            />
            <ChartShowValues t-props="this.props" defaultValue="this.defaults.showValues"/>
          </div>
        </Section>
        <Section class="'pt-0'" t-if="this.showValues || this.showLabels">
          <TextStyler
            class="'o-values-style'"
            updateStyle="(valuesDesign) => this.props.updateChart(this.props.chartId, { valuesDesign })"
            style="this.props.definition.valuesDesign || {}"
            defaultStyle="this.defaults.valuesDesign"
          />
        </Section>
        <PieHoleSize
          value="this.props.definition.pieHolePercentage ?? 25"
          onValueChange.bind="this.onPieHoleSizeChange"
        />
      </t>
    </SidePanelCollapsible>
    <ChartAnnotation t-props="this.props"/>
  </t>
</templates>
