{{ $id := printf "cli-%x" (sha1 .Inner) }}
<code class="cli-cmd" id="{{ $id }}">
  {{ $content := .Inner | replaceRE "\\*\\*(.*?)\\*\\*" "<b>$1</b>" | replaceRE "\\*(.*?)\\*" "<i>$1</i>" }}
  {{ $content | safeHTML }}
  <button class="cli-cmd-copy" data-cmd="{{ .Inner }}" data-target="{{ $id }}">
    <span class="copy-icon"><span class="iconify" data-icon="mdi:content-copy"></span></span>
    <span class="checkmark-icon" style="display: none;"><span class="iconify checkmark" data-icon="mdi:check"></span></span>
  </button>
</code>

<script>
document.querySelectorAll(".cli-cmd").forEach(function (cliCmd) {
  const copyButton = cliCmd.querySelector(".cli-cmd-copy");
  const copyIcon = copyButton.querySelector(".copy-icon");
  const checkmarkIcon = copyButton.querySelector(".checkmark-icon");

  copyButton.addEventListener("click", function () {
    const textToCopy = cliCmd.textContent.trim();

    const textarea = document.createElement("textarea");
    textarea.value = textToCopy;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);

    // Hide the copy icon and show the green checkmark icon for 1 second
    copyIcon.style.display = "none";
    checkmarkIcon.style.display = "inline";

    setTimeout(function () {
      checkmarkIcon.style.display = "none";
      copyIcon.style.display = "inline";
    }, 1000);
  });

  // Show the copy button on hover
  cliCmd.addEventListener("mouseover", function () {
    copyButton.style.display = "block";
  });

  // Hide the copy button when the mouse leaves
  cliCmd.addEventListener("mouseout", function () {
    copyButton.style.display = "none";
  });
});
</script>