<templates>
  <t t-name="o-spreadsheet-DataValidationEditor">
    <div class="o-dv-form w-100 h-100">
      <Section class="'o-dv-range'" title.translate="Apply to range">
        <SelectionInput
          ranges="this.state.rule.ranges"
          onSelectionChanged="(ranges) => this.onRangesChanged(ranges)"
          required="true"
        />
      </Section>
      <Section class="'pt-0'">
        <div class="o-subsection o-dv-settings">
          <div class="o-section-title">Criteria</div>
          <Select
            class="'o-dv-type mb-2'"
            values="this.dvCriterionOptions"
            selectedValue="this.state.rule.criterion.type"
            onChange.bind="this.onCriterionTypeChanged"
          />
          <t
            t-if="this.criterionComponent"
            t-component="this.criterionComponent"
            t-key="this.state.rule.criterion.type"
            criterion="this.state.rule.criterion"
            onCriterionChanged.bind="this.onCriterionChanged"
            autofocus="this.state.isTypeUpdated"
          />
        </div>
      </Section>

      <Section class="'o-dv-invalid-option pt-0'" title.translate="If the data is invalid">
        <Select
          class="'o-dv-reject-input pt-0'"
          values="this.isRuleBlockingSelectOptions"
          selectedValue="this.state.rule.isBlocking ? 'true' : 'false'"
          onChange.bind="this.changeRuleIsBlocking"
        />
      </Section>

      <Section>
        <div class="o-sidePanelButtons">
          <button t-on-click="this.onCancel" class="o-dv-cancel o-button">Discard</button>
          <button t-on-click="this.onSave" class="o-dv-save o-button primary">Save</button>
        </div>
      </Section>
      <Section>
        <ValidationMessages messages="this.errorMessages" msgType="'error'"/>
      </Section>
    </div>
  </t>
</templates>
