<!-- share modal -->
<dialog id="share" class="modal">
  <div class="modal-box">
    <div role="alert" class="alert alert-warning mb-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="h-6 w-6 shrink-0 stroke-current"
        fill="none"
        viewBox="0 0 24 24">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
      <span>Sorry, your system didn't support webShareAPI. Please click copy button below</span>
    </div>
    <div class="flex items-center">
      <input
        type="text"
        id="share-url"
        value="{{ rootURL }}{{ page.url }}"
        class="input input-bordered w-full mr-4"
        aria-label="link"
        disabled/>
      <button 
        class="btn btn-primary" 
        onclick="copyToClipboard()">
        Copy
      </button>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>