// templui component code - version: v0.84.0 installed by templui v0.84.0
package code

import (
	"git.jmbit.de/jmb/scanfile/server/web/templui/components/icon"
	"git.jmbit.de/jmb/scanfile/server/web/templui/utils"
)

type Size string

const (
	SizeSm   Size = "sm"
	SizeLg   Size = "lg"
	SizeFull Size = "full"
)

type Props struct {
	ID             string
	Class          string
	Attrs          templ.Attributes
	Language       string
	ShowCopyButton bool
	Size           Size
	CodeClass      string
}

templ Code(props ...Props) {
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/pojoaque.min.css"/>
	{{ var p Props }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	if p.ID == "" {
		{{ p.ID = "code-" + utils.RandomID() }}
	}
	<div
		id={ p.ID }
		class={ utils.TwMerge("relative code-component", p.Class) }
		data-code-component
		{ p.Attrs... }
	>
		<pre class="overflow-hidden!">
			<code
				data-code-block
				class={
					utils.TwMerge(
						"language-"+p.Language,
						"overflow-y-auto! rounded-md block text-sm max-h-[501px]",
						utils.If(p.Size == SizeSm, "max-h-[250px]"),
						utils.If(p.Size == SizeLg, "max-h-[1000px]"),
						utils.If(p.Size == SizeFull, "max-h-full"),
						"hljs-target",
						p.CodeClass,
					),
				}
			>
				{ children... }
			</code>
		</pre>
		if p.ShowCopyButton {
			<button
				data-copy-button
				type="button"
				class="absolute top-2 right-2 hover:bg-gray-500 hover:bg-opacity-30 text-white p-2 rounded"
			>
				<span data-icon-check class="hidden">
					@icon.Check(icon.Props{Size: 14})
				</span>
				<span data-icon-clipboard>
					@icon.Clipboard(icon.Props{Size: 14})
				</span>
			</button>
		}
	</div>
}

templ Script() {
	<script defer src="/assets/js/code.min.js"></script>
}