<templates>
  <t t-name="o-spreadsheet-TreeMapChartDesignPanel">
    <GeneralDesignEditor t-props="this.props"/>

    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Tree map colors">
      <t t-set-slot="content">
        <Section class="'pt-0'">
          <BadgeSelection
            choices="this.coloringOptionChoices"
            onChange.bind="this.changeColoringOption"
            selectedValue="this.coloringOptions.type"
          />

          <t t-if="this.coloringOptions.type === 'categoryColor'">
            <TreeMapCategoryColors
              chartId="this.props.chartId"
              definition="this.props.definition"
              onColorChanged.bind="this.onCategoryColorChange"
            />
          </t>
          <t t-else="">
            <TreeMapColorScale
              chartId="this.props.chartId"
              definition="this.props.definition"
              onColorChanged.bind="this.onColorScaleChange"
            />
          </t>
        </Section>
      </t>
    </SidePanelCollapsible>

    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Headers and labels">
      <t t-set-slot="content">
        <Section title.translate="Headers" class="'pt-0 pb-0'">
          <Checkbox
            name="'showHeaders'"
            label.translate="Show headers"
            value="this.showHeaders"
            onChange="(showHeaders) => this.props.updateChart(this.props.chartId, { showHeaders })"
          />
        </Section>
        <Section class="'pt-0'" t-if="this.showHeaders">
          <TextStyler
            class="'pt-0 o-header-style'"
            updateStyle="(headerDesign) => this.props.updateChart(this.props.chartId, { headerDesign })"
            style="this.props.definition.headerDesign || {}"
            defaultStyle="this.defaults.headerDesign"
            hasBackgroundColor="true"
          />
        </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="'pt-0 o-values-style'"
            updateStyle="(valuesDesign) => this.props.updateChart(this.props.chartId, { valuesDesign })"
            style="this.props.definition.valuesDesign || {}"
            defaultStyle="this.defaults.valuesDesign"
            hasVerticalAlign="true"
          />
        </Section>
        <Section class="'pt-0'" title.translate="Number formatting">
          <ChartHumanizeNumbers t-props="this.props"/>
        </Section>
      </t>
    </SidePanelCollapsible>
    <ChartAnnotation t-props="this.props"/>
  </t>
</templates>
