<templates>
  <t t-name="o-spreadsheet-LinkDisplay">
    <div class="o-link-tool d-flex align-items-center rounded">
      <!-- t-key to prevent owl from re-using the previous img element when the link changes.
    The wrong/previous image would be displayed while the new one loads -->
      <img
        t-if="this.link.isExternal"
        t-key="this.link.url"
        t-attf-src="https://www.google.com/s2/favicons?sz=16&amp;domain={{this.link.url}}"
      />
      <a
        t-if="this.link.isExternal"
        class="o-link"
        t-att-href="this.link.url"
        target="_blank"
        t-on-click.prevent="this.openLink"
        t-att-title="this.link.url">
        <t t-out="this.getUrlRepresentation(this.link)"/>
      </a>
      <a
        t-else=""
        class="o-link"
        t-on-click.prevent="this.openLink"
        t-on-auxclick.prevent="this.openLink"
        t-att-title="this.getUrlRepresentation(this.link)">
        <t t-out="this.getUrlRepresentation(this.link)"/>
      </a>
      <span
        t-if="!this.env.model.getters.isReadonly()"
        class="o-link-icon o-unlink"
        t-on-click="this.unlink"
        title="Remove link">
        <t t-call="o-spreadsheet-Icon.UNLINK"/>
      </span>
      <span
        t-if="!this.env.model.getters.isReadonly()"
        class="o-link-icon o-edit-link"
        t-on-click="this.edit"
        title="Edit link">
        <t t-call="o-spreadsheet-Icon.EDIT"/>
      </span>
    </div>
  </t>
</templates>
