<templates>
  <t t-name="o-spreadsheet-WaterfallChartDesignPanel">
    <GeneralDesignEditor t-props="this.props">
      <t t-set-slot="general-extension">
        <Section class="'o-vertical-axis-selection pt-0'" title.translate="Vertical axis position">
          <RadioSelection
            choices="this.axisChoices"
            selectedValue="this.props.definition.verticalAxisPosition"
            name="'axis'"
            onChange.bind="this.updateVerticalAxisPosition"
          />
        </Section>
        <ChartLegend t-props="this.props"/>
        <Section class="'pt-0'" title.translate="Values">
          <ChartShowValues t-props="this.props"/>
        </Section>
        <Section class="'pt-0'" title.translate="Zoom">
          <Checkbox
            name="'zoomable'"
            label.translate="Show slicer"
            value="this.props.definition.zoomable"
            onChange.bind="this.onToggleZoom"
            className="'mb-2'"
          />
        </Section>
        <Section class="'pt-0'" title.translate="Number formatting">
          <ChartHumanizeNumbers t-props="this.props"/>
        </Section>
      </t>
    </GeneralDesignEditor>
    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Waterfall design">
      <t t-set-slot="content">
        <Section class="'pt-0'" title.translate="Options">
          <t t-set="firstValueAsSubtotal">Use first value as subtotal</t>
          <Checkbox
            className="'mb-2'"
            name="'firstValueAsSubtotal'"
            label="firstValueAsSubtotal"
            value="this.props.definition.firstValueAsSubtotal"
            onChange.bind="this.onUpdateFirstValueAsSubtotal"
          />
          <t t-set="showSubTotalsLabel">Show subtotals at the end of series</t>
          <Checkbox
            className="'mb-2'"
            name="'showSubTotals'"
            label="showSubTotalsLabel"
            value="this.props.definition.showSubTotals"
            onChange.bind="this.onUpdateShowSubTotals"
          />
          <t t-set="showConnectorLinesLabel">Show connector lines</t>
          <Checkbox
            name="'showConnectorLines'"
            label="showConnectorLinesLabel"
            value="this.props.definition.showConnectorLines"
            onChange.bind="this.onUpdateShowConnectorLines"
          />
        </Section>
        <Section class="'pt-0'" title.translate="Colors">
          <div class="o-waterfall-positive-color d-flex align-items-center mb-2">
            <RoundColorPicker
              currentColor="this.positiveValuesColor"
              onColorPicked="(color) => this.updateColor('positiveValuesColor', color)"
            />
            <span class="ps-2">Color of positive values</span>
          </div>
          <div class="o-waterfall-negative-color d-flex align-items-center mb-2">
            <RoundColorPicker
              currentColor="this.negativeValuesColor"
              onColorPicked="(color) => this.updateColor('negativeValuesColor', color)"
            />
            <span class="ps-2">Color of negative values</span>
          </div>
          <div class="o-waterfall-subtotal-color d-flex align-items-center">
            <RoundColorPicker
              currentColor="this.subTotalValuesColor"
              onColorPicked="(color) => this.updateColor('subTotalValuesColor', color)"
            />
            <span class="ps-2">Color of subtotals</span>
          </div>
        </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>
