{% if courses.enrolled.any? %}
    <div class="courses-carousel-container">
      {% for course in courses.enrolled %}
        {% if course.completed? == false %}
          <div class="courses-carousel">
            {% include "cards_course" with course %}
          </div>
        {% endif %}
      {% endfor %}
    </div>
  {% else %}
    {% capture message %}
      {% t shared.zero_state.courses.index,
        key: current_school.course_vocabulary
      %}
    {% endcapture %}
    {% include "courses_zero_state", message: message %}
  {% endif %}
  
  <script>
    var slider = tns({
      container: '.courses-carousel-container',
      items: 1,
      nav: false,
      autoHeight: true,
      controlsText: ["<i class='fal fa-angle-left arrow-left '></i>","<i class='fal fa-angle-right arrow-right'></i>"],
      responsive: {
        1366: {
          items: 4
        },
        1170: {
          items: 3,
          autoHeight: false,
        },
        600: {
          items: 2,
        }
      }
    });
    </script>

<style>
    .courses-carousel-container {
        height: 100%;
        display: flex;
        padding-bottom: 2rem;
    }
   
  
</style>
  