<style>
    .inforgraphics_section {
        width: 100%;
        padding: 50px 0px 50px 0px;
        border-top: 1px solid rgb(224, 224, 224);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .inforgraphics_section .wrapper {
        display: flex;
        max-width: 700px;
        position: relative;
    }

    .inforgraphics_section .wrapper i {
        top: 50%;
        height: 44px;
        width: 44px;
        color: #343F4F;
        cursor: pointer;
        font-size: 1.15rem;
        position: absolute;
        text-align: center;
        line-height: 44px;
        background: #eee;
        border-radius: 50%;
        transform: translateY(-50%);
        transition: transform 0.1s linear;
    }

    .inforgraphics_section .wrapper i:active {
        transform: translateY(-50%) scale(0.9);
    }

    .inforgraphics_section .wrapper i:hover {
        background: #f2f2f2;
    }

    .inforgraphics_section .wrapper i:first-child {
        left: 0px;
        display: none;
        z-index: 999;
    }

    .inforgraphics_section .wrapper i:last-child {
        right: 0px;
    }

    .carousel {
        display: flex;
        max-width: 700px;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
    }

    .carousel-inner {
        display: flex;
        flex-wrap: nowrap;
    }

    .slide {
        flex: 0 0 calc(100% / 3);
        scroll-snap-align: start;
        padding: 20px;
    }

    .carousel img {
        width: 100%;
        object-fit: contain;
        max-width: 100%;
        height: auto;
        border-radius: 8px;
    }

    .carousel-inner p {
        text-align: center;
        margin: 10px 0;
        font-size: 14px;
        white-space: normal;
        word-wrap: break-word;
    }

    @media screen and (max-width: 768px) {
        .inforgraphics_section .wrapper {
            max-width: 100%;
        }

        
        .carousel-inner p {
            font-size: 20px;
        }

        .inforgraphics_section .wrapper i:first-child {
            left: 0;
            /* margin-left: 14px; */
            z-index: 99;
        }

        .inforgraphics_section .wrapper i:last-child {
            right: 0;
            z-index: 99;
            display: block !important;
        }

        .carousel {
            overflow-x: hidden;
        }
        .slide {
            flex: 0 0 100%;
            margin-right: 0;
        }
    }
</style>

<div class="inforgraphics_section">
    <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
    <div class="wrapper">
        <i id="left" class="fas fa-angle-left"></i>
        <div class="carousel">
            <div class="carousel-inner">
                {% for item in featureData.infographics %}
                <div class="slide">
                    <img src="{{ item.image }}" alt="img" draggable="false">
                    <p class="infographic-desc">{{ item.description | capitalize }}</p>
                </div>
                {% endfor %}
            </div>
        </div>
        <i id="right" class="fas fa-angle-right"></i>
    </div>
</div>

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

    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>