{%- comment -%}
  Renders share button.
  Accepts:
  - block: {Object} passes in the block information.
  - share_link: {String} url to be added to the input the user will get/copy.
  - share_title
  - share_image
  - placement

  Usage:
  {%- render 'share-button', block: block, share_link: share_url -%}
{%- endcomment -%}

{%- liquid
  assign share_title = share_title | url_param_escape
  if share_image
    assign preview_image = share_image | image_url: width: 1024, height: 1024
  endif
  assign target = '_blank'
-%}
  <wrapp-hdt-share-btn class="hdt-contents" hidden>
    <button class="hdt-share-button hdt-share-button--native hdt-s-text hdt-inline-flex hdt-align-center" hidden>
      <span class="hdt-product__extra-icon">{% render 'icon' with 'share' %}</span>
      <span class="hdt-product__extra-text hdt-font-semibold"> {{ 'general.social.shares.share_btn' | t }}</span>
    </button>
  </wrapp-hdt-share-btn>
  <button class="hdt-share-button hdt-inline-flex hdt-align-center hdt-s-text" aria-controls="Popover-{{ block.id }}" aria-haspopup="dialog" aria-expanded="false">
    <span class="hdt-product__extra-icon">{% render 'icon' with 'share' %}</span>
    <span class="hdt-product__extra-text hdt-font-semibold">{{ 'general.social.shares.share_btn' | t }}</span>
  </button>
  <hdt-popover class="hdt-popover hdt-hidden" id="Popover-{{ block.id }}" placement="{{ placement | default: 'top-start' }}" color-scheme="{{ settings.color_scheme_dialog }}" initial-focus="false">
    <div class="hdt-share-button__header hdt-hidden md:hdt-flex hdt-s-text">
      <span>{{ 'general.social.shares.share_header' | t | escape }}</span>
      <wrapp-close-btn>
        <button aria-label="Close"><svg class="hdt-icon hdt-icon-close" role="presentation" fill="none" focusable="false" width="14" height="14" viewBox="0 0 16 16"><path d="M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z" fill="currentColor"></path></svg></button>
      </wrapp-close-btn>
    </div>
    <div class="hdt-share-button__links">
      <hdt-tooltip placement="top-start">
        <a aria-label="{{ 'general.social.shares.share_on_facebook' | t | escape }}" data-no-instant rel="noopener noreferrer nofollow" href="https://www.facebook.com/sharer/sharer.php?u={{ share_link }}" target="{{ target }}" class="social-facebook">{%- render 'icon_socials' with 'facebook' -%}</a>
      </hdt-tooltip>
      <hdt-tooltip placement="top-start">
        <a aria-label="{{ 'general.social.shares.share_on_twitter' | t | escape }}" data-no-instant rel="noopener noreferrer nofollow" href="http://x.com/share?text={{ share_title }}&amp;url={{ share_link }}" target="{{ target }}" class="social-twitter">{%- render 'icon_socials' with 'twitter' -%}</a>
      </hdt-tooltip>
      {%- if preview_image != blank -%}
        <hdt-tooltip placement="top-start">
          <a aria-label="{{ 'general.social.shares.share_on_pinterest' | t | escape }}" data-no-instant rel="noopener noreferrer nofollow" href="http://pinterest.com/pin/create/button/?url={{ share_link }}&amp;media=http:{{ preview_image }}&amp;description={{ share_title }}" target="{{ target }}" class="social-pinterest">{%- render 'icon_socials' with 'pinterest' -%}</a>
        </hdt-tooltip>
        <hdt-tooltip placement="top-start">
          <a aria-label="{{ 'general.social.shares.share_on_tumblr' | t | escape }}" data-no-instant rel="noopener noreferrer nofollow" data-content="http:{{ preview_image }}" href="//tumblr.com/widgets/share/tool?canonicalUrl={{ share_link }}" target="{{ target }}" class="social-tumblr">{%- render 'icon_socials' with 'tumblr' -%}</a>
        </hdt-tooltip>
      {%- endif -%}
      <hdt-tooltip placement="top-start">
        <a aria-label="{{ 'general.social.shares.share_on_telegram' | t | escape }}" data-no-instant rel="noopener noreferrer nofollow" target="{{ target }}" class="social-telegram" href="https://telegram.me/share/url?url={{ share_link }}">{%- render 'icon_socials' with 'telegram' -%}</a>
      </hdt-tooltip>
      <hdt-tooltip placement="top-start">
        <a aria-label="{{ 'general.social.shares.share_on_whatsapp' | t | escape }}" data-no-instant rel="noopener noreferrer nofollow" target="{{ target }}" class="social-whatsapp" href="https://wa.me/?text={{ share_title }}&#x20;{{ share_link }}">{%- render 'icon_socials' with 'whatsapp' -%}</a>
      </hdt-tooltip>
      <hdt-tooltip placement="top-start">
        <a aria-label="{{ 'general.social.shares.share_on_email' | t | escape }}" data-no-instant rel="noopener noreferrer nofollow" href="mailto:?subject={{ share_title }}&amp;body={{ share_link }}" target="{{ target }}" class="social-email">{%- render 'icon_socials' with 'email' -%}</a>
      </hdt-tooltip>
    </div>
    <div class="hdt-share-button__wrapp">
      <input id="input-{{ block.id }}" class="hdt-share-button__input hdt-s-text2" type="text" value="{{ share_link }}" onclick="this.select();" readonly>
      <wrapp-hdt-copy-btn class="hdt-contents" text-id="input-{{ block.id }}" get-document data-success-message="{{ 'general.social.shares.success_message' | t | escape }}">
        <button class="hdt-share-button__copy">{{ 'general.social.shares.share_btn_copy' | t }}</button>
      </wrapp-hdt-copy-btn>
    </div>
  </hdt-popover>