<section class="subcategories subcategory-showcase py-5">
	<div class="container-fluid">
		<div class="subcategory-showcase__heading">
			<span class="subcategory-showcase__eyebrow">Каталог салона</span>
			<h2>{{ module_name }}</h2>
		</div>

		{% block subcategories %}
		{% set slider_id = random|default('category-list') %}
		<div id="subcategory-slider-{{ slider_id }}" class="swiper subcategory-slider">
			<div class="swiper-wrapper">
				{% for category in categories %}
				<div class="swiper-slide">
					<a href="{{ category.href }}" class="subcategory-card">
						<span class="subcategory-card__image">
							<img src="{{ category.thumb }}" alt="{{ category.name }}" loading="lazy">
							<span class="subcategory-card__number">{% if loop.index < 10 %}0{% endif %}{{ loop.index }}</span>
						</span>
						<span class="subcategory-card__body">
							<span class="subcategory-card__title">{{ category.name }}</span>
							<span class="subcategory-card__arrow" aria-hidden="true">
								<svg width="18" height="12" viewBox="0 0 18 12">
									<path d="M0 6h16M11 1l5 5-5 5"></path>
								</svg>
							</span>
						</span>
					</a>
				</div>
				{% endfor %}
			</div>

			<div class="subcategory-slider__controls">
				<button class="swiper-button-prev subcategory-slider__button" type="button" aria-label="Предыдущие категории">
					<svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true">
						<path d="M18 6H2m5 5L2 6l5-5"></path>
					</svg>
				</button>
				<div class="swiper-pagination"></div>
				<button class="swiper-button-next subcategory-slider__button" type="button" aria-label="Следующие категории">
					<svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true">
						<path d="M0 6h16m-5-5 5 5-5 5"></path>
					</svg>
				</button>
			</div>
		</div>

		<script>
			(function () {
				var slider = document.getElementById('subcategory-slider-{{ slider_id }}');

				if (!slider || typeof Swiper === 'undefined') {
					return;
				}

				new Swiper(slider, {
					grabCursor: true,
					rewind: true,
					slidesPerView: 1.35,
					spaceBetween: 14,
					watchOverflow: true,
					breakpoints: {
						480: {
							slidesPerView: 2.15,
							spaceBetween: 16
						},
						768: {
							slidesPerView: 3,
							spaceBetween: 18
						},
						992: {
							slidesPerView: 4,
							spaceBetween: 20
						},
						1280: {
							slidesPerView: 5,
							spaceBetween: 22
						}
					},
					pagination: {
						el: slider.querySelector('.swiper-pagination'),
						clickable: true
					},
					navigation: {
						nextEl: slider.querySelector('.swiper-button-next'),
						prevEl: slider.querySelector('.swiper-button-prev')
					}
				});
			})();
		</script>
		{% endblock %}
	</div>
</section>
