document.addEventListener("DOMContentLoaded", function () {
	const galleries = document.querySelectorAll(".block-gallery");
	if (!galleries) return;

	const currentBlock = document.querySelector(".block-gallery");
	if (!currentBlock) return;

	const swiperFraction = currentBlock.querySelector(".swiper-pagination-fraction");
	const slides = currentBlock.querySelectorAll(".swiper-slide");
	const slideCount = slides.length;
	swiperFraction.textContent = `Article n°1 sur ${slideCount}`;

	new Swiper(".gallery-swiper", {
		slidesPerView: 2,
		spaceBetween: 30,
		loop: true,
		grabCursor: true,
		navigation: {
			nextEl: ".swiper-button-next",
			prevEl: ".swiper-button-prev",
		},
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
			renderBullet: function (index, className) {
				return `<button class="${className}"></button>`;
			},
		},
		on: {
			slideChange: (swiper) => {
				const slidesCount = swiper?.slides?.length;
				swiperFraction.textContent = `Photo n°${swiper.realIndex + 1} sur ${slidesCount}`;
			},
		},
	});
});