<div class="rounded-t-full bg-sky-600">.</div>
<div class="flex justify-center gap-2 p-8 bg-sky-600">
{{ range .pngFiles }}
    <button class="p-1 rounded bg-white transform hover:scale-120
        transition-all duration-100 ease-linear border-2 hover:z-2 active:z-0" onclick="openmodal({{.}})">
            <img src="{{ . }}" alt="Carousel Image" class="
                h-[20rem] rounded">
    </button>
{{ end }}
</div>
<div class="rounded-b-full bg-sky-600 shadow-xl/30 mb-4">.</div>

{{ range .pngFiles }}
<dialog id="{{ . }}" class="fixed inset-0 flex items-center justify-center
    z-50 w-full h-full bg-black bg-opacity-50"
   style="background-color: rgba(0,0,0,0.2);" onclick="openmodal({{.}})" hidden>
    <img src="{{ . }}" alt="Carousel Image" class="
        mt-2 p-1 bg-white border-2
        h-[80%] rounded-md opacity-100">
</dialog>
{{ end }}
<script>
function openmodal(id){
  let dialog = document.getElementById(id);
  dialog.toggleAttribute("hidden");
}
</script>
