"><div data-controller="image-modal"> <div data-action="click->image-modal#openModal" data-image-modal-id-param="attachment_image" class="cursor-pointer"> <img src="x" style="max-height: 400px;"> </div> <div data-image-modal-target="attachment" data-action="click->image-modal#clickOutside" class="max-w-0 hidden"> <div class="relative w-full h-full"> <a data-action="click->image-modal#close" class="z-50 hidden sm:block fixed top-20 right-10 text-white hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 border-transparent rounded-md cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" class="stroke-1 h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </a> </div> <div class="space-x-10 mt-16"> <a href="" data-image-modal-target="download" data-action="click->image-modal#downloadImage" class="z-50 mt-1_ hidden sm:block fixed right-24 top-16 mt-4 text-white hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 border-transparent rounded-md cursor-pointer"> <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 stroke-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path> </svg> </a> </div> <a data-action="click->image-modal#zoomIn" class="cursor-pointer z-50 hidden sm:block p-1 fixed bottom-10 text-white bg-transparent hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 border-transparent rounded-full" style="margin: 0; left: 50%; transform: translate(50%, 0); bottom: 10%;"> <svg xmlns="http://www.w3.org/2000/svg" class="stroke-1 h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path> </svg> </a> <a data-action="click->image-modal#zoomOut" class="cursor-pointer z-50 hidden sm:block p-1 fixed bottom-10 text-white bg-transparent hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 border-transparent rounded-full" style="margin: 0; left: 45%; transform: translate(45%, 0); bottom: 10%;"> <svg xmlns="http://www.w3.org/2000/svg" class="stroke-1 h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM13.5 10.5h-6"></path> </svg> </a> <div class="hidden" id="attachment_" data-image-modal-target="slide"> <div class="z-40 fixed w-full h-full top-0 left-0 flex items-center justify-center"> <div data-image-modal-target="imageBackground" class="absolute w-full h-full bg-gray-900 opacity-75"></div> <div class="w-screen justify-center flex items-center mx-auto z-50"> <div class="py-4 text-left px-6"> <div class="flex justify-between items-center pb-3"> <img data-filename="x" data-image-modal-target="image" src="x" alt=""> </div> </div> </div> </div> </div> </div> </div>