<templates>
  <t t-name="o-spreadsheet-NamedRangePreview">
    <t>
      <div
        class="o-named-range-preview p-3 pb-1 border-bottom"
        t-att-class="{
          'o-focused': this.state.isSelectionInputFocused
        }"
        t-ref="this.namedRangePreviewRef">
        <div class="d-flex justify-content-between">
          <div class="o-named-range-container w-100 d-flex flex-column">
            <TextInput
              class="'o-fw-bold'"
              value="this.props.namedRange.name"
              onChange.bind="this.updateNamedRangeName"
              selectContentOnFocus="true"
            />
            <SelectionInput
              ranges="[this.rangeString]"
              hasSingleRange="true"
              required="true"
              onSelectionChanged.bind="this.onSelectionInputChanged"
              onSelectionConfirmed.bind="this.onSelectionInputConfirmed"
              onInputFocused.bind="this.onSelectionInputFocused"
            />
          </div>
          <div
            class="o-named-range-edit d-none align-items-center o-button-icon px-3"
            title="Delete named range"
            t-on-click.stop="this.deleteNamedRange">
            <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
          </div>
        </div>
      </div>
    </t>
  </t>
</templates>
