<templates>
  <t t-name="o-spreadsheet-SelectionInput">
    <div class="o-selection" t-ref="this.selectionRef">
      <div
        t-foreach="this.ranges"
        t-as="range"
        t-key="range.id"
        class="o-selection-input d-flex flex-row"
        t-att-style="this.dragAndDrop.itemsStyle[range.id]"
        t-att-class="this.props.class">
        <span
          t-if="this.ranges.length > 1 and this.props.onSelectionReordered"
          title="Reorder range"
          t-on-pointerdown="(ev) => this.startDragAndDrop(range.id, ev)"
          class="o-drag-handle d-flex align-items-center mb-2 o-button-icon">
          <t t-call="o-spreadsheet-Icon.SHORT_THIN_DRAG_HANDLE"/>
        </span>
        <div class="position-relative w-100">
          <input
            type="text"
            spellcheck="false"
            placeholder="e.g. A1:A2"
            t-on-input="(ev) => this.onInputChanged(range.id, ev)"
            t-on-click="() => this.focus(range.id)"
            t-on-keydown="this.onKeydown"
            t-att-value="range.xc"
            t-att-style="this.getColor(range)"
            class="o-input mb-2"
            t-att-class="{
              'o-disabled-ranges' : range.disabled and !range.isFocused,
              'o-focused' : range.isFocused,
              'o-invalid border-danger position-relative': this.isInvalid || !range.isValidRange,
              'text-decoration-underline': range.xc and range.isFocused and this.store.mode === 'select-range'
            }"
            t-ref="range.isFocused ? this.focusedInputRef : this.unfocusedInputRef"
          />
          <span
            t-if="this.isInvalid || !range.isValidRange"
            class="input-icon text-danger position-absolute d-flex align-items-center"
            title="This range is invalid">
            <t t-call="o-spreadsheet-Icon.ERROR"/>
          </span>
          <span
            class="input-icon o-disabled-ranges position-absolute d-flex align-items-center"
            t-if="!range.isFocused and range.disabled"
            t-att-title="this.props.disabledRangeTitle">
            <t t-call="o-spreadsheet-Icon.CIRCLE_INFO"/>
          </span>
        </div>
        <button
          class="border-0 bg-transparent fw-bold o-remove-selection o-button-icon pe-0"
          t-if="this.ranges.length > 1"
          t-on-click="() => this.removeInput(range.id)">
          <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
        </button>
      </div>
      <div class="d-flex flex-row w-100 o-selection-input">
        <button
          class="o-button o-add-selection"
          t-if="this.canAddRange"
          t-on-click="this.addEmptyInput">
          Add range
        </button>
        <div class="ms-auto" t-if="this.store.hasFocus or this.isResettable">
          <button class="o-button o-selection-ko" t-if="this.isResettable" t-on-click="this.reset">
            Reset
          </button>
          <button
            class="o-button primary ms-2 o-selection-ok"
            t-att-disabled="!this.isConfirmable"
            t-on-click="this.confirm">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </t>
</templates>
