<div class="carousel-header-container continue-carousel-spacing">
    <div class=" bolder-headline carousel-heading-text">
        {{heading}}
    </div>
    {% if courses.enrolled.any? %}
        <div class="see-all-btn-container">
            <a class="see-all-btn" href="{{see_all_link}}">See All</a>
        </div>
    {% endif %}
</div>

{% assign courses_count = 0 %} 
{% if courses.enrolled.any? %}
    {% assign carousel_assigned_category = category | downcase %}
    <div class="np-carousel-courses">
    {% for course in enrolled_courses %}
        {% if progress == "in-progress" %}
            {% if course.progress > 0 and course.progress < 100 %}
                {% assign courses_count = courses_count | plus: 1 %} 
                <div class="np-carousel-card ">
                    <div class="col-xs-12 carousel-col">
                        {% include "cards_course" with course %}
                    </div>
                </div> 
            {% endif %}
        {% elsif progress == "completed" %} 
            {% if course.progress == 100 %}
                {% assign courses_count = courses_count | plus: 1 %}
                <div class="np-carousel-card ">
                    <div class="col-xs-12 carousel-col">
                        {% include "cards_course" with course %}
                    </div>
                </div> 
            {% endif %}
        {% else %}      
            {% if category == "any" or category == "" %}
                {% assign courses_count = courses_count | plus: 1 %}
                <div class="np-carousel-card ">
                    <div class="col-xs-12 carousel-col">
                        {% include "cards_course" with course %}
                    </div>
                </div> 
            {% else %}              
                {% for course_category in course.categories %}
                    {% assign category_name = course_category.name | downcase %}
                    {% if category_name == carousel_assigned_category %}
                        {% assign courses_count = courses_count | plus: 1 %}
                        <div class="np-carousel-card">
                            <div class="col-xs-12 carousel-col">
                                {% include "cards_course" with course %}
                            </div>
                        </div> 
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endif %}
    {% endfor %}
    </div>
{% endif %}

{% if courses_count == 0 %}
    <div class="np-homepage-featured-empty">
      <div class="np-zero-state-text">
        {% if progress == "in-progress" %}
            <div class="zero-state-message">
                <div>You haven't started any courses</div>
                <a href="/app/courses" class="np-button button-zero-state">Browse Courses</a>
            </div>
         {% endif %}

         {% if progress == "completed" %}
            <div class="zero-state-message">
                <div>You haven't completed any courses</div>
              
            </div>
         {% endif %}

        {% unless progress == "completed" or progress == "in-progress" %}
            <div class="zero-state-message">
                <div class="">There are currently no courses in this category</div>
                
            </div>
         {% endunless %}
      </div>
      <img
        class="np-zero-state-courses"
      />
    </div>
{% endif %}

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

<style>
    .button-zero-state {
        margin-top: 1rem
    }


</style>