{{ $id := printf "code-%x" (sha1 .Inner) }}
<div class="codeblock-wrapper" style="position: relative; max-height: 300px; overflow: auto;">
  
  <style>
    .lnt {
      display: none; /* Hides the line numbers */
    }
    .copy-icon,
    .checkmark-icon {
      cursor: pointer; /* Change cursor to pointer */
    }
  </style>

  {{- if .IsNamedParams }}
    {{- $lang := .Get "language" | default "plaintext" }}
    {{- $options := dict "linenos" "table" }}
    {{- highlight .Inner $lang $options | safeHTML }}
  {{- else }}
    {{- highlight .Inner "plaintext" | safeHTML }}
  {{- end }}

  <!-- Define icons directly without creating a button -->
  <span class="gdoc-post__codecopy" data-clipboard-text="{{ .Inner }}" role="button" aria-label="Copy">
    <svg class="copy-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="iconify iconify--mdi" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:content-copy">
      <path fill="currentColor" d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z"></path>
    </svg>
    <svg class="checkmark-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="iconify iconify--mdi" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="mdi:check">
      <path fill="currentColor" d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"></path>
    </svg>
  </span>
</div>

<script>
document.querySelectorAll(".codeblock-wrapper").forEach(function (wrapper) {
  const copyButton = wrapper.querySelector(".gdoc-post__codecopy");
  
  if (copyButton) { // Check if copyButton exists
    copyButton.addEventListener('click', function () {
      const textToCopy = copyButton.getAttribute('data-clipboard-text');

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

      // Feedback for the user
      const copyIcon = copyButton.querySelector(".copy-icon");
      const checkmarkIcon = copyButton.querySelector(".checkmark-icon");
      copyIcon.style.display = "none";
      checkmarkIcon.style.display = "inline";

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