{{- $id := .Get "id" | default (printf "code-%d" (now.UnixNano)) -}}
{{- $lang := .Get "lang" | default "bash" -}}
{{- $file := .Get "file" | default "Terminal" -}}
{{- $icon := .Get "icon" | default "terminal" -}}

<div class="relative my-6">
    <div class="grid w-full grid-cols-2 border border-default bg-neutral-secondary-soft rounded-t-base">
        <ul class="flex text-sm font-medium text-center text-body">
        <li>
            <span class="inline-flex items-center gap-1.5 rounded-ss-base w-full p-2 px-3 text-heading bg-neutral-secondary-soft border-r border-default">
                {{ if eq $icon "terminal" }}
                    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 9 3 3-3 3m5 0h3M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z"/></svg>
                {{ end }}
                {{ if eq $icon "file" }}
                    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 3v4a1 1 0 0 1-1 1H5m5 4-2 2 2 2m4-4 2 2-2 2m5-12v16a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V7.914a1 1 0 0 1 .293-.707l3.914-3.914A1 1 0 0 1 9.914 3H18a1 1 0 0 1 1 1Z"/>
                    </svg>
                {{ end }}
                {{ $file }}
            </span>
        </li>
        </ul>
        <div class="flex justify-end">
        <button data-tooltip-target="{{ $id }}-copy-clipboard-tooltip" data-tooltip-placement="top" type="button" data-copy-state="copy" class="flex items-center px-3 py-2 rounded-se-base text-xs font-medium text-body bg-neutral-secondary-soft hover:bg-neutral-tertiary hover:text-heading border-l border-default copy-clipboard-simple">
            <svg class="w-4 h-4 me-1.5 copy-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M9 8v3a1 1 0 0 1-1 1H5m11 4h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-7a1 1 0 0 0-1 1v1m4 3v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7.13a1 1 0 0 1 .24-.65L7.7 8.35A1 1 0 0 1 8.46 8H13a1 1 0 0 1 1 1Z"/></svg>
            <svg class="w-4 h-4 me-1.5 copied-icon hidden text-fg-success" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11.917 9.724 16.5 19 7.5"/>
            </svg>
            <span class="copy-text">Copy</span>
            <textarea class="hidden" data-clipboard-content>{{- .Inner -}}</textarea>
        </button>
        <div id="{{ $id }}-copy-clipboard-tooltip" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-lg shadow-xs opacity-0 tooltip">
            Copy to clipboard
            <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
        </div>
    </div>
    <code class="block shiki-code-block dark:[&>pre]:!bg-neutral-primary-soft [&>pre]:p-6 [&>pre]:text-sm [&>pre]:overflow-x-scroll [&>pre]:rounded-b-base" data-language="{{$lang}}">{{- trim .Inner "\n" -}}</code>
</div>