<div class="not-prose my-6 overflow-hidden rounded-xl bg-slate-900 shadow-lg ring-1 ring-slate-800/50 code-block-wrapper">
    <div class="flex min-h-[calc(theme(spacing.11)+1px)] flex-wrap items-center gap-x-4 border-b border-slate-700/50 bg-slate-800/50 px-3 sm:px-4">
       <h4 class="mr-auto text-xs font-semibold text-slate-300 tracking-wide"><%= title -%></h4>
       <button class="copy-btn-response" onclick="copyCodeBlock(this)" aria-label="Copy code">
          <svg class="copy-icon w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
          </svg>
          <svg class="check-icon w-4 h-4 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          <span class="copy-text">Copy</span>
       </button>
    </div>
    <div class="group">
      <% if(requestType && requestUrl){ %>
      <div class="flex flex-wrap sm:flex-nowrap items-center gap-2 sm:gap-3 py-2 sm:py-0 sm:h-10 border-b border-slate-700/30 bg-slate-800/30 px-3 sm:px-4">
         <% if( requestType === "GET"){ %>
            <span class="inline-flex items-center rounded-md bg-emerald-500/10 px-2 py-1 text-xs font-semibold text-emerald-400 ring-1 ring-inset ring-emerald-500/20 flex-shrink-0">GET</span>
          <% } %>
          <% if( requestType === "POST"){ %>
            <span class="inline-flex items-center rounded-md bg-indigo-500/10 px-2 py-1 text-xs font-semibold text-indigo-400 ring-1 ring-inset ring-indigo-500/20 flex-shrink-0">POST</span>
          <% } %>
          <% if( requestType === "DELETE"){ %>
            <span class="inline-flex items-center rounded-md bg-red-500/10 px-2 py-1 text-xs font-semibold text-red-400 ring-1 ring-inset ring-red-500/20 flex-shrink-0">DELETE</span>
          <% } %>
          <% if( requestType === "PUT"){ %>
            <span class="inline-flex items-center rounded-md bg-amber-500/10 px-2 py-1 text-xs font-semibold text-amber-400 ring-1 ring-inset ring-amber-500/20 flex-shrink-0">PUT</span>
          <% } %>
         <span class="font-mono text-xs sm:text-sm text-slate-400 break-all"><%= requestUrl -%></span>
      </div>
       <% } %>
       <% if(code){ %>
       <div class="relative">
          <pre class="overflow-x-auto p-4 text-sm text-slate-300 leading-relaxed"><code class="language-json text-sm"><%= code -%></code></pre>
       </div>
       <% } %>
    </div>
</div>
<script>
function copyCodeBlock(btn) {
   const codeBlock = btn.closest('.code-block-wrapper');
   const code = codeBlock.querySelector('code');
   if (code) {
      navigator.clipboard.writeText(code.textContent).then(() => {
         const copyIcon = btn.querySelector('.copy-icon');
         const checkIcon = btn.querySelector('.check-icon');
         const copyText = btn.querySelector('.copy-text');

         copyIcon.classList.add('hidden');
         checkIcon.classList.remove('hidden');
         copyText.textContent = 'Copied!';
         btn.classList.add('copied');

         setTimeout(() => {
            copyIcon.classList.remove('hidden');
            checkIcon.classList.add('hidden');
            copyText.textContent = 'Copy';
            btn.classList.remove('copied');
         }, 2000);
      });
   }
}
</script>
