{% load lb_tags %}
<c-vars
    class=""
    language="html"
    code=""
    codeClass=""
    copyButton=True
    copyButtonIconClass=""
/>

<div class="relative codeblock-container {{ class }}" {{ attrs }}>
    {% if copyButton %}
        <div class="absolute top-2 right-2 z-10">
            <c-lb.button
                href="#"
                onclick="copyCodeBlock(this)"
                size="xs"
                variant="ghost"
                class="bg-base-200 hover:bg-base-200/60 text-base-content copy-code-btn"
            >
                <c-lbi n="rmx.file-copy" w="1em" h="1em" :class=copyButtonIconClass />
            </c-lb.button>
            <span class="text-xs text-base-content/70 hidden absolute top-full right-0 mt-1 whitespace-nowrap bg-base-200 px-2 py-1 rounded copy-notification pointer-events-none">Copied!</span>
        </div>
    {% endif %}
    <pre class="bg-black text-white rounded-lg overflow-x-auto text-sm overflow-y-auto font-mono scrollbar-thin"><code class="language-{{ language }} scrollbar-thin p-4 code-content {{ codeClass }}">{% if code %}{{ code }}{% else %}{{ slot }}{% endif %}</code></pre>
</div>