package components

templ Modal(show bool) {
	<div
        id="modal"
        class={
            "flex justify-center items-center",
            "fixed inset-0",
            "backdrop-blur-sm bg-black/30",
            templ.KV("hidden", !show) }>
        <div class="border border-muted rounded">
            <div class="relative">
                <button id="close" class="absolute top-2 right-2 w-fit text-muted hover:text-reset">X</button>
                { children... }
            </div>
        </div>
        <script type="text/javascript" id="modal-js">
            htmx.on("#close", "click", function () {
                const modal = htmx.find("#modal")
                modal.replaceChildren([])
                modal.classList.add("hidden")
            })
        </script>
	</div>
}