function startPostSliders() {
	const sliders = document.querySelectorAll('.multi-slider');

	const gap = getComputedStyle(document.documentElement).getPropertyValue('--column-gap');
	const postSliderConfig = {
		type: 'loop',
		perPage: 3,
		perMove: 3,
		arrows: false,
		gap: gap,
		breakpoints: {
			600: {
				perPage: 2,
				perMove: 2,
			},
			400: {
				fixedWidth: '100%',
				perPage: 1,
				perMove: 1,
				gap: 0,
			}
		}
	}

	const productSliderConfig = {
		type: 'loop',
		perPage: 4,
		perMove: 4,
		arrows: false,
		gap: gap,
		breakpoints: {
			600: {
				perPage: 2,
				perMove: 2,
				gap: gap,
			},
			400: {
				perPage: 2,
				perMove: 2,
				gap: 20,
			}
		}
	}

	sliders.forEach((slider, index) => {
		const sliderEl = slider.querySelector('.splide');
		const track = slider.querySelector('.splide__track');
		if (!track) {
			return;
		}
		const nextArrow = slider.querySelector('.multi-slider-arrow.next');
		const prevArrow = slider.querySelector('.multi-slider-arrow.prev');

		var config;

		if (slider.classList.contains('product-slider')) {
			config = productSliderConfig;
		} else {
			config = postSliderConfig;
		}
		const splide = new Splide(sliderEl, config);

		if (nextArrow) {
			nextArrow.addEventListener('click', function (event) {
				event.preventDefault();
				splide.go('>');
			});
		}

		if (prevArrow) {
			prevArrow.addEventListener('click', function (event) {
				event.preventDefault();
				splide.go('<');
			});
		}
		splide.mount();

		updateControls(slider);
	});

	function updateControls(slider) {
		const nextArrow = slider.querySelector('.multi-slider-arrow.next');
		const prevArrow = slider.querySelector('.multi-slider-arrow.prev');
		const dots = slider.querySelector('.splide__pagination');
		const pageCount = dots.querySelectorAll('li') ? dots.querySelectorAll('li').length : 1;

		if (pageCount < 2) {
			nextArrow.style.display = 'none';
			prevArrow.style.display = 'none';
			if (dots) {
				dots.style.display = 'none';
			}
		} else {
			nextArrow.removeAttribute('style');
			prevArrow.removeAttribute('style');
			if (dots) {
				dots.removeAttribute('style');
			}
		}
	}

	window.addEventListener('resize', () => {
		setTimeout(function () {
			sliders.forEach(slider => {
				updateControls(slider);
			})
		}, 200);
	});

}

function startTopSlider() {
	const sliders = document.querySelectorAll('.top-slider');
	const postSliderConfig = {
		type: 'loop',
		fixedWidth: '25%',
		perPage: 4,
		perMove: 4,
		arrows: false,
		pagination: false,
		breakpoints: {
			900: {
				fixedWidth: '33.333%',
				perPage: 3,
				perMove: 3,
			},
			700: {
				fixedWidth: '50%',
				perPage: 2,
				perMove: 2,
			},
			400: {
				fixedWidth: '100%',
				perPage: 1,
				perMove: 1,
			}
		}
	}

	sliders.forEach(function (slider) {
		const sliderEl = slider.querySelector('.splide');
		const nextArrow = slider.querySelector('.top-slider-arrow.next');
		const prevArrow = slider.querySelector('.top-slider-arrow.prev');

		const splide = new Splide(sliderEl, postSliderConfig).mount();

		nextArrow.addEventListener('click', function (event) {
			event.preventDefault();
			splide.go('>');
		});

		prevArrow.addEventListener('click', function (event) {
			event.preventDefault();
			splide.go('<');
		});
	});
}

window.addEventListener('load', function () {
    'use strict';
	startTopSlider();
	startPostSliders();
});