<templates>
  <t t-name="o-spreadsheet-LinkEditor">
    <div
      class="o-link-editor rounded h-100"
      t-on-scroll.stop=""
      t-on-wheel.stop=""
      t-on-keydown="this.onKeyDown">
      <div class="o-section mb-4 h-100">
        <div class="o-section-title">Text</div>
        <div class="d-flex">
          <input
            type="text"
            title="Link label"
            placeholder="e.g. 'Link label'"
            class="o-input"
            t-att-value="this.state.label"
            t-on-input="(ev) => this.state.label = ev.target.value"
          />
        </div>

        <div class="o-section-title mt-3">Link</div>
        <div
          class="o-link-url"
          t-ref="this.urlInputContainer"
          tabindex="-1"
          t-on-keydown="this.onInputKeyDown">
          <t t-if="this.state.isUrlEditable">
            <input
              class="o-input"
              type="text"
              placeholder="e.g. 'http://www.odoo.com'"
              title="Link URL"
              t-ref="this.urlInput"
              t-att-value="this.state.url"
              t-on-input="this.onLinkUrlInput"
            />
          </t>
          <t t-else="">
            <input
              type="text"
              class="o-input"
              title="Link URL"
              t-att-value="this.getUrlRepresentation(this.state)"
              disabled="1"
            />
          </t>
          <button
            t-if="this.state.url"
            t-on-click="this.removeLink"
            class="o-remove-url o-button-icon"
            t-translation="off">
            <i class="oi" data-icon="close"/>
          </button>
        </div>
      </div>

      <div class="suggestions border rounded user-select-none" t-ref="this.suggestionListRef">
        <t t-foreach="this.state.linksByCategory" t-as="proposalCategory" t-key="proposalCategory">
          <t t-set="categoryTitle" t-value="proposalCategory"/>
          <t t-set="proposals" t-value="proposalCategory_value"/>
          <div class="o-section my-1">
            <div class="o-section-title ps-2" t-out="categoryTitle"/>
            <div
              t-foreach="proposals"
              t-as="proposal"
              t-key="categoryTitle + proposal_index"
              t-att-data-index="proposal.index"
              class="suggestion-item ps-3 d-flex align-items-center justify-content-start"
              t-att-class="{ 'selected' : proposal.index === this.state.selectedIndex }"
              t-on-click="proposal.onSelect"
              t-on-dblclick="this.save">
              <span class="me-1" t-if="proposal.icon">
                <t t-call="{{proposal.icon}}"/>
              </span>
              <span class="text-truncate" t-out="proposal.text"/>
            </div>
          </div>
        </t>
        <div
          t-if="!this.state.linksList.length"
          class="o-filter-menu-no-values d-flex align-items-center justify-content-center w-100 h-100 text-muted fst-italic">
          No results
        </div>
      </div>
      <div class="o-buttons">
        <button t-on-click="this.cancel" class="o-button o-cancel me-2">Discard</button>
        <button
          t-on-click="this.save"
          class="o-button primary o-save"
          t-att-disabled="!this.state.url">
          Confirm
        </button>
      </div>
    </div>
  </t>
</templates>
