<!-- share button -->
<button aria-label="share" class="btn btn-ghost btn-circle" onclick="sharePost()">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="18" cy="5" r="3" />
    <circle cx="6" cy="12" r="3" />
    <circle cx="18" cy="19" r="3" />
    <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
    <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
  </svg>                                  
</button>
<script>
  function copyToClipboard() {
    const urlInput = document.getElementById('share-url');
    urlInput.select();
    urlInput.setSelectionRange(0, 99999); // For mobile devices
    navigator.clipboard.writeText(urlInput.value)
      .then(() => {
        alert('URL copied to clipboard');
      })
      .catch(err => {
        console.error('Failed to copy: ', err);
      });
  }

  function sharePost() {      
    if (!navigator.share) {
      // use modal if native share not compatible
      share.showModal()
      return
    }

    navigator.share({
      title: document.title,
      url: location.href
    }).catch((e) => {
      if (e.name !== 'AbortError') {
        console.warn(`Failed to use native share API. `, e);
        // fallback custom modal only if not aborted by user
        share.showModal();
      }
    });
  }
</script>