{% assign topic_classname = topic | split: " " %}

<div class="courses-carousel np-carousel" data-topic="{{ topic_classname | join: '-' | downcase }}">
    {% if items.any? %}
        {% assign sorted_items =items | sort: "name" %}
        {% for course in sorted_items %}

            {% comment %} USED FOR PROGRESS FILTER  {% endcomment %}
            {% assign course_status = "" %}

            {% if course.started? == false  %}
                {% assign course_status = "not-started" %}
            {% elsif course.completed?  %}
                {% assign course_status = "completed" %}
            {% elsif course.started?  %}
                {% assign course_status = "in-progress" %}
            {% endif %}

            {% if topic == "Not Categorized" %}
                <div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
            {% else %}
                {% for category in course.categories %}
                    {% if category.name == topic  %}
                        <div class="np-carousel-card {{course_status}}"> {% include "cards_course" with course %}</div>
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}
    {% endif %}
</div>

<script>

$(document).ready(function(){

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