<div class="inforgraphics_section">
    <h3 class="text-center w-100 mb-5" style="font-size:22px"><b>Other useful information</b></h3>
    <div class="wrapper">
        <svg id="left" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>angle-left</title> <path d="M7.28 23.28c-0.2 0-0.44-0.080-0.6-0.24l-6.44-6.44c-0.32-0.32-0.32-0.84 0-1.2l6.44-6.44c0.32-0.32 0.84-0.32 1.2 0 0.32 0.32 0.32 0.84 0 1.2l-5.8 5.84 5.84 5.84c0.32 0.32 0.32 0.84 0 1.2-0.16 0.16-0.44 0.24-0.64 0.24z"></path> </g></svg>
        <div class="carousel">
            <div class="carousel-inner">
                {%- for item in dataToShow.infographics -%}
                <div class="slide">
                    <img src="{{ item.image }}" alt="img" draggable="false">
                    <p class="infographic-desc">{{ item.description | capitalize }}</p>
                </div>
                {% endfor %}
            </div>
        </div>
        <svg id="right" fill="#000000" viewBox="-12 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>angle-right</title> <path d="M0.88 23.28c-0.2 0-0.44-0.080-0.6-0.24-0.32-0.32-0.32-0.84 0-1.2l5.76-5.84-5.8-5.84c-0.32-0.32-0.32-0.84 0-1.2 0.32-0.32 0.84-0.32 1.2 0l6.44 6.44c0.16 0.16 0.24 0.36 0.24 0.6s-0.080 0.44-0.24 0.6l-6.4 6.44c-0.2 0.16-0.4 0.24-0.6 0.24z"></path> </g></svg>
    </div>
</div>

<script>
    const carousel = document.querySelector(".carousel-inner"),
        firstImg = carousel.querySelectorAll("img")[0],
        arrowIcons = document.querySelectorAll(".wrapper svg")

    const numImages = carousel.querySelectorAll("img").length;
    const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px

    if (numImages > 3) {
        arrowIcons[1].style.display = "block"
    } else {
        arrowIcons[0].style.display = "none";
        arrowIcons[1].style.display = "none";
    }

    let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
    const showHideIcons = () => {
        let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
        arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
        arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
    }

    arrowIcons.forEach(icon => {
        icon.addEventListener("click", () => {
            let firstImgWidth = firstImg.clientWidth + 40;
            const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
            carousel.scrollBy({
                left: scrollAmount,
                behavior: "smooth",
            });
            setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
        });
    });

    // const autoSlide = () => {
    //   // if there is no image left to scroll then return from here
    //   if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;

    //   positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
    //   let firstImgWidth = firstImg.clientWidth + 14;
    //   // getting difference value that needs to add or reduce from carousel left to take middle img center
    //   let valDifference = firstImgWidth - positionDiff;

    //   if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
    //     return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
    //   }
    //   // if user is scrolling to the left
    //   carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
    // }

    // const dragStart = (e) => {
    //   // updatating global variables value on mouse down event
    //   isDragStart = true;
    //   prevPageX = e.pageX || e.touches[0].pageX;
    //   prevScrollLeft = carousel.scrollLeft;
    // }

    // const dragging = (e) => {
    //   // scrolling images/carousel to left according to mouse pointer
    //   if (!isDragStart) return;
    //   e.preventDefault();
    //   isDragging = true;
    //   carousel.classList.add("dragging");
    //   positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
    //   carousel.scrollLeft = prevScrollLeft - positionDiff;
    //   showHideIcons();
    // }

    // const dragStop = () => {
    //   isDragStart = false;
    //   carousel.classList.remove("dragging");

    //   if (!isDragging) return;
    //   isDragging = false;
    //   autoSlide();
    // }

    // carousel.addEventListener("mousedown", dragStart);
    // carousel.addEventListener("touchstart", dragStart);

    // document.addEventListener("mousemove", dragging);
    // carousel.addEventListener("touchmove", dragging);

    // document.addEventListener("mouseup", dragStop);
    // carousel.addEventListener("touchend", dragStop);
</script>