[viewBag]
==
<div class="social-icons d-flex flex-column gap-2 position-fixed top-50 translate-middle-y end-0 me-3" style="z-index: 1;">
        {% set whatsapp = "" %}
        {% for social in commonDetail.social_repeater if "wa.me" in social.link %}
            {% set whatsapp=social.link %}
        {% endfor %}

      <a title="whatsapp" target=_blank href="{{ whatsapp }}" class="whatsapp-icons d-inline-block"><img src="https://devcarib.buznames.com/themes/caribbeanctt/assets/assetsmain/images/whatsapp2.svg" alt="whatsapp" class="w-100 h-100" style="max-width: 1024px;" loading="lazy"></a>
      <a title="email" href="mailto:{{ commonDetail.email_repeater.0.email }}?subject={{ productDetail.title }}" class="mail-icon d-inline-block"><img src="https://devcarib.buznames.com/themes/caribbeanctt/assets/assetsmain/images/email2.svg" alt="email" class="w-100 h-100" style="max-width: 1024px;" loading="lazy"></a>
      <a title="share" href="#" class="share-icon d-flex align-items-center justify-content-center rounded-circle"><i class="fa-solid fa-share"></i></a>
      <span class="result" hidden></span>
</div>
{% put scripts %}
<script>
const shareData = {
  title: "Caribbean Travel And Tours",
  text: "{{ productDetail.title }}",
  url: "{{ currentPageUrl }}",
};

const btn = document.querySelector(".share-icon");
const resultPara = document.querySelector(".result");

// Share must be triggered by "user activation"
btn.addEventListener("click", async () => {
  try {
    await navigator.share(shareData);
    resultPara.textContent = shareData.title;
  } catch (err) {
    resultPara.textContent = `Error: ${err}`;
  }
});
</script>
{% endput %}