<templates>
  <t t-name="o-spreadsheet-ConditionalFormattingEditor">
    <div class="o-cf-editor">
      <Section class="'o-cf-range pb-0'" title.translate="Apply to range">
        <div class="o-selection-cf">
          <SelectionInput
            ranges="this.store.state.ranges"
            class="'o-range'"
            isInvalid="this.store.isRangeValid"
            onSelectionChanged="(ranges) => this.store.onRangeUpdate(ranges)"
            onSelectionConfirmed="() => this.store.onRangeConfirmed()"
            required="true"
          />
        </div>
      </Section>
      <Section class="'pb-0'" title.translate="Format rules">
        <div class="o-cf-type-selector">
          <BadgeSelection
            choices="this.cfTypesValues"
            onChange="(ruleType) => this.store.changeRuleType(ruleType)"
            selectedValue="this.store.state.currentCFType"
          />
        </div>
      </Section>
      <Section>
        <CellIsRuleEditor
          t-if="this.store.state.currentCFType === 'CellIsRule'"
          store="this.store"
        />
        <ColorScaleRuleEditor
          t-if="this.store.state.currentCFType === 'ColorScaleRule'"
          store="this.store"
        />
        <IconSetRuleEditor
          t-if="this.store.state.currentCFType === 'IconSetRule'"
          store="this.store"
        />
        <DataBarRuleEditor
          t-if="this.store.state.currentCFType === 'DataBarRule'"
          store="this.store"
        />
      </Section>
      <Section class="'pt-1'">
        <div class="o-sidePanelButtons">
          <button t-on-click="this.onCancel" class="o-button o-cf-cancel">Discard</button>
          <button
            t-on-click="this.onSave"
            class="o-button primary o-cf-save"
            t-att-disabled="this.store.state.errors.length !== 0">
            Save
          </button>
        </div>
      </Section>
      <Section>
        <ValidationMessages messages="this.store.errorMessages" msgType="'error'"/>
      </Section>
    </div>
  </t>
</templates>
