Pages Carousel

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-pages-carousel {
	margin-top: rem-calc(45);

	.swiper-slide {
		aspect-ratio: 460 / 570;

		@include bp($md) {
			min-height: 570px;
			aspect-ratio: auto;
		}
	}



	&.block-pages-carousel--nav-disabled {
		padding: 0;

		@include bp($lg) {
			padding: 0 $container-spacing-desktop;
		}

		.block-pages-carousel__heading-wrapper {
			padding: 0 $container-spacing-mobile;

			@include bp($lg) {
				padding: 0;
			}
		}

		@include bp($lg) {
			.swiper-wrapper {
				margin-bottom: rem-calc(45);
			}
			.slider-navigation {
				display: none;
			}
		}
	}

	&__link {
		position: absolute;
		height: 100%;
		width: 100%;
		overflow: hidden;

		&:after {
			content: '';
			background: linear-gradient(180deg, rgba(2, 33, 46, 0) 0%, #02212E 100%);
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		&:hover {
			.block-pages-carousel__image {
				transform: scale(1.05);
			}
		}
	}

	&__heading-wrapper {
		margin-bottom: 8px;
		padding: 0 $container-spacing-mobile;

		@include bp($lg) {
			padding: 0 $container-spacing-desktop;
		}
	}

	&__heading {
		text-transform: uppercase;
		@include responsive-font($heading-8, $heading-4);
	}

	&__image {
		height: 100%;
		width: 100%;
		object-fit: cover;
		transition: transform 0.3s ease;
	}

	&__content {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
		padding: rem-calc(24);


		@include bp($md) {
			padding: rem-calc(40);
		}
	}

	&__title {
		@include responsive-font($heading-8, $heading-4);
		color: $white;
		margin: 0;
		font-weight: 400;
	}

	&__excerpt {
		@include responsive-font($body-small, $body-default);
		color: $white;
		margin-top: 1rem;

		p {
			color: $white;
			margin: 0;
		}
	}

	@include slider-navigation;

	.slider-navigation .slider-button:hover {
		background-color: $prussian-blue;
	}
}

class PagesCarousel {
    block;

	constructor(block) {
		this.block = block;
		this.init();
	}

	init() {

		this.swiperElem = this.block.querySelector('.swiper');
		this.paginationElem = this.block.querySelector('.slider-pagination');
		this.prevBtnElem = this.block.querySelector('.slider-button--prev');
		this.nextBtnElem = this.block.querySelector('.slider-button--next');
		this.slidesCount = this.swiperElem.dataset.slidesCount;

		//Alters for desktop
		this.centeredSlides = this.slidesCount <= 3 ? false : true;
		this.loop = this.slidesCount <= 3 ? false : true;


		this.swiper = new Swiper(this.swiperElem, {
			pagination: {
				el: this.paginationElem,
				type: "custom",
				renderCustom: function (swiper, current, total) {
					return current + '  ' + total;
				}
			},
			navigation: {
				nextEl: this.nextBtnElem,
				prevEl: this.prevBtnElem
			},
            slidesPerView: 1.33,
            spaceBetween: 9,
			centeredSlides: true,
			loop: true,
            breakpoints: {
                576: {
                    slidesPerView: 2,
					spaceBetween: 24,
					centeredSlides: true,
					loop: true,
                },
                992: {
                    slidesPerView: this.slidesCount <= 3 ? 3 : 3.33,
					centeredSlides: this.centeredSlides,
					loop: this.loop,

                }
            },

		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-pages-carousel').forEach((block) => {
		new PagesCarousel(block);
	})
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/pages-carousel",
    "title": "Pages Carousel",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-pages-carousel.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Pages Carousel",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/pages-carousel/block-pages-carousel.css"],
    "viewScript": ["pages-carousel"]
}