<templates>
  <t t-name="o-spreadsheet-CriterionInput">
    <div class="o-dv-input position-relative w-100 p-1">
      <t t-if="this.allowedValues === 'onlyLiterals'">
        <input
          type="text"
          t-ref="this.inputRef"
          t-on-input="this.onInputValueChanged"
          t-on-change="this.onInputValueConfirmed"
          t-att-value="this.state.textInput"
          class="o-input"
          t-att-class="{
              'o-invalid border-danger position-relative': this.errorMessage,
            }"
          t-att-title="this.errorMessage"
          t-att-placeholder="this.placeholder"
          t-on-keydown="this.props.onKeyDown"
          t-on-blur="this.props.onBlur"
        />
      </t>
      <t t-else="">
        <StandaloneComposer
          t-props="this.getDataValidationRuleInputComposerProps()"
          t-key="this.props.value"
        />
      </t>
      <span
        t-if="this.errorMessage"
        class="error-icon text-danger position-absolute d-flex align-items-center"
        t-att-title="this.errorMessage">
        <t t-call="o-spreadsheet-Icon.ERROR"/>
      </span>
    </div>
  </t>
</templates>
