<div class="mt-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4">
{{ range .Params.catalog }}
{{ if ne .item "" }}
<div class="flex flex-col bg-white rounded-lg border p-4 relative">
<img src="https://placehold.co/300x200/" alt="Placeholder Image" class="w-full h-48 rounded-md object-cover" />
<div class="px-1 pt-4">
<div class="font-bold text-xl mb-2">{{ .item }}</div>
<div class="text-gray-800 text-base">
{{ if ne .quant "" }}
<div class="flex flex-row justify-between">
<strong>Quantity:</strong>
<span>{{ .quant }}</span>
</div>
{{ end }}
{{ if ne .dimensions "" }}
<div class="text-right flex flex-row justify-between">
<strong>Dimensions:</strong>
<span>{{ .dimensions }}</span>
</div>
{{ end }}
{{ if ne .baseCost "" }}
<div class="flex flex-row justify-between">
<strong>Base Cost:</strong>
<span>{{ .baseCost }}</span>
</div>
{{ end }}
{{ if ne .deliveryPickup "" }}
<div class="flex flex-row justify-between">
<strong>+ Delivery/Pickup:</strong>
<span>{{ .deliveryPickup }}</span>
</div>
{{ end }}
{{ if ne .installBreakdown "" }}
<div class="flex flex-row justify-between">
<strong>+ Install/Breakdown:</strong>
<span>{{ .installBreakdown }}</span>
</div>
{{ end }}
{{ if ne .purchaseCost "" }}
<div class="flex flex-row justify-between">
<strong>Purchase Cost:</strong>
<span>{{ .purchaseCost }}</span>
</div>
{{ end }}
</div>
</div>
<div class="h-full grid grid-cols-1 place-items-end">
<a class="w-full" href="#modal-{{ .item | urlize }}">
<button type="button" class="w-full px-3 py-2 text-xs font-medium text-center text-white bg-black rounded-lg hover:bg-gray-800 focus:ring-4 focus:outline-none transition-all duration-200">
Expand
</button>
</a>
</div>
<div id="modal-{{ .item | urlize }}" class="fixed z-10 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="w-full mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-black sm:mx-0 sm:h-10 sm:w-10">
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="w-full mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-xl mb-2" id="modal-title"><strong>{{ .item }}</strong> details</h3>
<div class="px-1 pt-4 w-full">
<div class="text-gray-800 text-base">
{{ if ne .quant "" }}
<div class="flex flex-row justify-between">
<strong>Quantity:</strong>
<span>{{ .quant }}</span>
</div>
{{ end }}
{{ if ne .dimensions "" }}
<div class="flex flex-row justify-between">
<strong>Dimensions:</strong>
<span>{{ .dimensions }}</span>
</div>
{{ end }}
{{ if ne .baseCost "" }}
<div class="flex flex-row justify-between">
<strong>Base Cost:</strong>
<span>{{ .baseCost }}</span>
</div>
{{ end }}
{{ if ne .deliveryPickup "" }}
<div class="flex flex-row justify-between">
<strong>Delivery/Pickup:</strong>
<span>{{ .deliveryPickup }}</span>
</div>
{{ end }}
{{ if ne .installBreakdown "" }}
<div class="flex flex-row justify-between">
<strong>Install/Breakdown:</strong>
<span>{{ .installBreakdown }}</span>
</div>
{{ end }}
{{ if ne .purchaseCost "" }}
<div class="flex flex-row justify-between">
<strong>Purchase Cost:</strong>
<span>{{ .purchaseCost }}</span>
</div>
{{ end }}
{{ if ne .cat "" }}
<div class="flex flex-row justify-between">
<strong>Category:</strong>
<span>{{ .cat }}</span>
</div>
{{ end }}
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-black text-base font-medium text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black sm:ml-3 sm:w-auto sm:text-sm" @click="open = false">
Close
</button>
</div>
</div>
</div>
</div>
</div>
{{ end }}
{{ end }}
</div>
<script>
const buttons = document.querySelectorAll('button[type="button"]');
buttons.forEach(button => {
button.addEventListener('click', event => {
const modalId = event.target.parentElement.getAttribute('href');
const modal = document.querySelector(modalId);
modal.classList.remove('hidden');
});
});
const closeButtons = document.querySelectorAll('button[type="button"].close-modal');
closeButtons.forEach(button => {
button.addEventListener('click', event => {
const modal = event.target.closest('.modal');
modal.classList.add('hidden');
});
});
</script>