{{ define "fragments/markdown/body" }}
{{ range $seg := .Segments }}
{{ if $seg.IsCode }}
{{ if ge $seg.Lines 28 }}
<div class="code-block-wrapper">
  <div class="code-block-pre-container">{{ $seg.HTML }}</div>
  <div class="code-block-actions">
    <div class="flex items-center gap-3">
      <label class="btn">
        <input type="checkbox" class="code-block-expand peer/collapse !hidden">
        <span class="peer-checked/collapse:hidden inline-flex items-center gap-1">{{ i "unfold-vertical" "w-4 h-4" }}<span class="hidden sm:inline">Expand code</span></span>
        <span class="hidden peer-checked/collapse:inline-flex items-center gap-1">{{ i "fold-vertical" "w-4 h-4" }}<span class="hidden sm:inline">Collapse code</span></span>
      </label>
      <span class="text-sm text-gray-500 dark:text-gray-400 tabular-nums whitespace-nowrap">{{ $seg.Lines }} lines</span>
    </div>
    <div class="flex items-center gap-1.5">
      <button class="btn code-block-copy-btn" title="Copy to clipboard">
        <span class="copy-default inline-flex">{{ i "copy" "w-4 h-4" }}</span>
        <span class="copy-success hidden inline-flex">{{ i "copy-check" "w-4 h-4" }}</span>
        <span class="hidden sm:inline">Copy to clipboard</span>
      </button>
      <button class="btn code-block-open-raw-btn" title="Open raw in new tab">
        {{ i "external-link" "w-4 h-4" }}
        <span class="hidden sm:inline">Open raw in new tab</span>
      </button>
    </div>
  </div>
</div>
{{ else }}
{{ $seg.HTML }}
{{ end }}
{{ else }}
{{ $seg.HTML }}
{{ end }}
{{ end }}
<script>
(() => {
  if (document.__tangledCbInit) return;
  document.__tangledCbInit = true;

  document.addEventListener('click', (e) => {
    const copyBtn = e.target.closest('.code-block-copy-btn');
    if (copyBtn) {
      const pre = copyBtn.closest('.code-block-wrapper')?.querySelector('pre');
      if (!pre) return;
      navigator.clipboard.writeText(pre.textContent).then(() => {
        copyBtn.querySelector('.copy-default')?.classList.add('hidden');
        copyBtn.querySelector('.copy-success')?.classList.remove('hidden');
        setTimeout(() => {
          copyBtn.querySelector('.copy-default')?.classList.remove('hidden');
          copyBtn.querySelector('.copy-success')?.classList.add('hidden');
        }, 1500);
      });
      return;
    }

    const rawBtn = e.target.closest('.code-block-open-raw-btn');
    if (rawBtn) {
      const pre = rawBtn.closest('.code-block-wrapper')?.querySelector('pre');
      if (!pre) return;
      const text = pre.textContent;
      const blob = new Blob([text], {type: 'text/plain'});
      const url = (window.URL ?? window.webkitURL).createObjectURL(blob);
      window.open(url, '_blank');
      setTimeout(() => (window.URL ?? window.webkitURL).revokeObjectURL(url), 0);
    }
  });
})();
</script>
{{ end }}