<div
class="mt-2 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4"
>
{{ range .Params.art }} {{ if ne .item "" }}
<div class="relative flex flex-col bg-white rounded-lg border p-4 relative">
<img
loading="lazy"
src="{{ .main }}"
class="h-72 w-full rounded-md object-cover"
/>
<div class="flex flex-row gap-2 my-2 justify-between">
<div class="flex flex-col items-start">
<span>
<strong class="text-base text-gray-700"> {{ .title }}</strong>
<span class="text-[0.6rem] text-gray-600">{{ .year }}</span>
</span>
</div>
{{ if .status }}
<div>
<span
class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full"
>{{ .status }}</span
>
</div>
{{ end }}
</div>
<div class="grid grid-cols-1 place-items-end">
<a class="w-full" href="#modal-{{ .listOrder | 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-{{ .listOrder | urlize }}"
class="fixed z-10 inset-0 overflow-y-auto hidden bg-gray-500 bg-opacity-75 transition-opacity"
aria-labelledby="modal-title"
role="dialog"
aria-modal="true"
>
<div
class="flex items-end justify-center min-h-screen p-4 text-center sm:block sm:p-0"
>
<div class="fixed inset-0" 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 self-center sm:max-w-lg w-full"
>
<div
class="bg-white max-h-[80vh] overflow-y-scroll overflow-x-hidden px-4 pt-5 pb-4 sm:p-6 sm:pb-4"
>
<div class="sm:flex sm:items-start">
<div class="w-full mt-3 text-center sm:mt-0 sm:text-left">
<h3 class="text-xl" id="modal-title">
<strong>{{ .item }}</strong>
</h3>
{{ if .gallery }}
<div
class="columns-1 gap-2 sm:columns-2 sm:gap-4 [&>div:not(:first-child)]:mt-4"
>
{{ range .gallery }}
<div
class="relative ease-in-out duration-200 transition-all"
>
<img
loading="lazy"
class="rounded-lg w-full"
src="{{ .image }}"
/>
<button class="absolute right-2 top-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="fill-black w-6 h-6 bg-white p-1 rounded-sm"
>
<path
d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z"
/>
</svg>
</button>
</div>
{{ end }}
</div>
{{ end }}
<div>
<div class="flex flex-row gap-2 my-2 justify-between mt-4">
<div class="flex flex-col items-start">
<span class="text-xs text-gray-600">Title:</span>
<span>
<strong class="text-lg text-gray-700">
{{ .title }}</strong
>
</span>
</div>
{{ if .status }}
<div>
<span
class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full"
>{{ .status }}</span
>
</div>
{{ end }}
</div>
{{ if .location }}
<div class="flex flex-col items-start mb-2">
<span class="text-xs text-gray-600">Location:</span>
<span> {{ .location }} </span>
</div>
{{ end }}
<div class="flex flex-col items-start mb-2">
<span class="text-xs text-gray-600">Year:</span>
<span> {{ .year }} </span>
</div>
<div class="flex flex-col items-start">
<span class="text-xs text-gray-600">Description:</span>
<span> {{ .description }} </span>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button
id="close-modal"
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>
document.addEventListener("DOMContentLoaded", function () {
const modalButtons = document.querySelectorAll(".grid-cols-1 a");
const closeButtons = document.querySelectorAll("#close-modal");
const modals = document.querySelectorAll(".fixed");
const radioButtons = document.querySelectorAll(
'input[type="radio"][name="category"]'
);
function filterItems(category) {
console.log("Filtering items for category:", category);
const items = document.querySelectorAll(".grid > div");
items.forEach((item) => {
const itemCategory = item.querySelector(".bg-blue-100");
if (!category || itemCategory.textContent === category) {
item.classList.remove("hidden");
} else {
item.classList.add("hidden");
const modalId = item.id.replace("modal-", "");
const modal = document.getElementById(modalId);
if (modal) modal.classList.add("hidden");
}
});
}
function updateUrl(category) {
const url = window.location.href.split("#")[0];
const newUrl = category ? `${url}#${category}` : url;
window.history.replaceState({}, "", newUrl);
}
const category = window.location.hash.substring(1);
console.log("Initial category:", category);
filterItems(category);
window.addEventListener("hashchange", function () {
const newCategory = window.location.hash.substring(1);
console.log("New category:", newCategory);
filterItems(newCategory);
});
radioButtons.forEach((radio) => {
radio.addEventListener("change", function () {
const category = this.value;
console.log("Selected category:", category);
updateUrl(category);
filterItems(category);
});
});
modalButtons.forEach((button) => {
button.addEventListener("click", function (e) {
e.preventDefault();
const modalId = this.getAttribute("href").substring(1);
const modal = document.getElementById(modalId);
modal.classList.remove("hidden");
});
});
closeButtons.forEach((button) => {
button.addEventListener("click", function (e) {
e.preventDefault();
const modal = this.closest(".fixed");
modal.classList.add("hidden");
});
});
if (category) {
const radioToSelect = document.querySelector(
`input[type="radio"][name="category"][value="${category}"]`
);
if (radioToSelect) {
radioToSelect.checked = true;
filterItems(category);
}
}
});
</script>