{% if courses.enrolled.any? %}
    <div class="np-homepage-featured-courses row">
      {% for course in courses.enrolled %}
        {% if course.progress > 0 %}
            <div class="col-xs-12">
                <div class="np-carousel-card "> {% include "cards_course" with course %}</div>
            </div> 
        {% endif %}
    {% endfor %}
    </div>
  {% else %}
    <div class="np-homepage-featured-empty">
      <div class="np-zero-state-text">
        {% t .empty, key: current_school.course_vocabulary %}
      </div>
      <img
        class="np-zero-state-courses"
        alt="{% t .empty, key: current_school.course_vocabulary %}"
      />
    </div>
  {% endif %}

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