<templates>
  <t t-name="o-spreadsheet-GaugeChartDesignPanel">
    <GeneralDesignEditor t-props="this.props">
      <t t-set-slot="general-extension">
        <Section class="'pt-0'" title.translate="Number formatting">
          <ChartHumanizeNumbers t-props="this.props"/>
        </Section>
      </t>
    </GeneralDesignEditor>
    <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Gauge Design">
      <t t-set-slot="content">
        <Section class="'pt-0'" title.translate="Range">
          <div class="o-subsection-left">
            <StandaloneComposer
              class="'o-data-range-min'"
              placeholder.translate="Value or formula"
              title.translate="Min value or formula"
              invalid="this.isRangeMinInvalid"
              composerContent="this.state.sectionRule.rangeMin"
              defaultRangeSheetId="this.sheetId"
              onConfirm="(str) => this.onConfirmGaugeRange('rangeMin', str)"
            />
          </div>
          <div class="o-subsection-right">
            <StandaloneComposer
              class="'o-data-range-max'"
              placeholder.translate="Value or formula"
              title.translate="Max value or formula"
              invalid="this.isRangeMaxInvalid"
              composerContent="this.state.sectionRule.rangeMax"
              defaultRangeSheetId="this.sheetId"
              onConfirm="(str) => this.onConfirmGaugeRange('rangeMax', str)"
            />
          </div>
        </Section>

        <Section title.translate="Thresholds">
          <div class="o-gauge-color-set">
            <table>
              <tr>
                <th class="o-gauge-color-set-colorPicker"/>
                <th class="o-gauge-color-set-text"/>
                <th class="o-gauge-color-set-operator"/>
                <th class="o-gauge-color-set-value">Value</th>
                <th class="o-gauge-color-set-type">Type</th>
              </tr>

              <tr>
                <td>
                  <RoundColorPicker
                    currentColor="this.state.sectionRule.colors.lowerColor"
                    onColorPicked="(color) => this.updateSectionColor('lowerColor', color)"
                  />
                </td>
                <td>When value is</td>
                <td class="pe-2">
                  <Select
                    selectedValue="this.state.sectionRule['lowerInflectionPoint'].operator"
                    name="'operatorType'"
                    values="this.inflectionPointOperators"
                    onChange.bind="(value) => this.updateSectionRuleOperator('lowerInflectionPoint', value)"
                  />
                </td>
                <td class="pe-2">
                  <StandaloneComposer t-props="this.getGaugeInflectionComposerProps('lowerColor')"/>
                </td>
                <td>
                  <Select
                    selectedValue="this.state.sectionRule['lowerInflectionPoint'].type"
                    name="'valueType'"
                    values="this.inflectionPointTypes"
                    onChange.bind="(value) => this.updateSectionRulePointType('lowerInflectionPoint', value)"
                  />
                </td>
              </tr>

              <tr>
                <td>
                  <RoundColorPicker
                    currentColor="this.state.sectionRule.colors.middleColor"
                    onColorPicked="(color) => this.updateSectionColor('middleColor', color)"
                  />
                </td>
                <td>When value is</td>
                <td class="pe-2">
                  <Select
                    selectedValue="this.state.sectionRule['upperInflectionPoint'].operator"
                    name="'operatorType'"
                    values="this.inflectionPointOperators"
                    onChange.bind="(value) => this.updateSectionRuleOperator('upperInflectionPoint', value)"
                  />
                </td>
                <td class="pe-2">
                  <StandaloneComposer
                    t-props="this.getGaugeInflectionComposerProps('middleColor')"
                  />
                </td>
                <td>
                  <Select
                    selectedValue="this.state.sectionRule['upperInflectionPoint'].type"
                    name="'valueType'"
                    values="this.inflectionPointTypes"
                    onChange.bind="(value) => this.updateSectionRulePointType('upperInflectionPoint', value)"
                  />
                </td>
              </tr>

              <tr>
                <td>
                  <RoundColorPicker
                    currentColor="this.state.sectionRule.colors.upperColor"
                    onColorPicked="(color) => this.updateSectionColor('upperColor', color)"
                  />
                </td>
                <td>Else</td>
                <td/>
                <td/>
                <td/>
              </tr>
            </table>
          </div>
        </Section>

        <ChartErrorSection
          t-if="this.designErrorMessages.length"
          messages="this.designErrorMessages"
        />
      </t>
    </SidePanelCollapsible>
    <ChartAnnotation t-props="this.props"/>
  </t>
</templates>
