<div class="carousel-wrapper">
    <div class="carousel-heading">Getting Started</div>
    <div class="carousel-filter-wrapper" id="carousel-filter-wrapper-started">
        <div class="filter-container">
            <div class="filter" id="filterToggle">Filter</div>
        </div>
        <div class="filter-content" id="filterContent">
            <div class="filter-option">
                <input class="filter-checkbox" type="checkbox" id="gs-not-started">
                <label class="filter-name">Not Started</label>
            </div>
            <div class="filter-option">
                <input class="filter-checkbox" type="checkbox" id="gs-in-progress">
                <label class="filter-name">In Progress</label>
            </div>
            <div class="filter-option">
                <input class="filter-checkbox" type="checkbox" id="gs-completed">
                <label class="filter-name">Completed</label>
            </div>
        </div>
    </div>
    <div class="getting-started-carousel">
        {% for course in courses.in_catalog %}
            {% for category in course.categories %}
                {% if category.name == 'Getting Started' %}
                    <div class="carousel-cards-container gettin-started-courses" progress="{% if course.progress == 100 %}completed{% elsif course.progress == 0 %}not-started{% else %}in-progress{% endif %}">
                        {% include 'cards_course' %}
                    </div>
                {% endif %}
            {% endfor %}
        {% endfor %}
    </div>
</div>

<style>
.getting-started-carousel {
  margin-top: 25px;
}
</style>

<script>
$(document).ready(function() {
    $(".getting-started-carousel").slick({
        slidesToShow: 3,
        cssEase: 'linear',
        prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
        nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
        infinite: false,
        responsive: [
            {
                breakpoint: 1170,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: false,
                    arrows: true,
                }
            }
        ]
    });

    document.getElementById("filterToggle").addEventListener("click", function() {
        const filterWrapper = document.querySelector('.carousel-filter-wrapper');
        filterWrapper.classList.toggle("filter-active");
    });
    document.addEventListener("click", function(event) {
        const filterWrapper = document.querySelector('#carousel-filter-wrapper-started');
        const isClickInside = filterWrapper.contains(event.target) || event.target.id === "filterToggle";

        if (!isClickInside) {
            filterWrapper.classList.remove("filter-active");
        }
    });
    function filterCards() {
        const selectedFilters = Array.from(document.querySelectorAll('.filter-checkbox:checked')).map(checkbox => checkbox.id.replace('gs-', ''));
        const cards = document.querySelectorAll('.gettin-started-courses');

        $(".getting-started-carousel").slick('slickUnfilter');

        if (selectedFilters.length === 0) {
            $(".getting-started-carousel").slick('slickUnfilter');
        } else {
            $(".getting-started-carousel").slick('slickFilter', function(index, element) {
                const cardProgress = element.getAttribute('progress'); 
                return selectedFilters.includes(cardProgress); 
            });
        }
    }

    document.querySelectorAll('#filterContent .filter-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', filterCards);
    });
});
</script>