{% assign content_counter = 0 %}

{% for course in courses.in_catalog %}
    {% for category in course.categories %}
        {% if course.enrolled? and course.progress < 100 %}
            {% assign content_counter = content_counter | plus: 1 %}
        {% endif %}
    {% endfor %}
{% endfor %}


<div class="progress-carousel-wrapper">
    <div class="progress-carousel">
        {% for course in courses.in_catalog %}
            {% if course.enrolled? and course.progress < 100 %}
                <div class="carousel-card-container">
                    {% include "cards_course" with course %}
                </div>
            {% endif %}
        {% endfor %}
        {% if content_counter < 3 %}
            <div class="carousel-card-container">
                {% include "learning_path_zero_state" %}
            </div>
        {% endif %}
    </div>
</div>
<script>
$(".progress-carousel").slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3,
    prevArrow: "<span class='prev-btn control-carousel lato'><i class='fas fa-chevron-left left-arrow'></i> Prev</span>",
    nextArrow: "<span class='next-btn control-carousel lato'>Next <i class='fas fa-chevron-right right-arrow'></i></span>",
    responsive: [
        {
            breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 1000,
                 settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            }
    ]
  });
</script>


<style>
.tns-controls {
    display: flex;
    justify-content: flex-end;
    margin: 2rem 0;
    gap: 25px;
    margin-right: 25px;
  }
  [data-controls="next"], [data-controls="prev"] {
    background: none;
    border: none;
}
.control-carousel {
    font-size: 1.25rem;
  }
.left-arrow {
    margin-right: 5px;
}
.right-arrow {
    margin-left: 5px;
}
.progress-carousel-wrapper {
    position: relative;
  }
  .next-btn {
    position: absolute;
    right: 20px;
    bottom: 0;
  }
  .prev-btn {
    position: absolute;
    right: 100px;
    bottom: 0;
    z-index:1;
  }
</style>
  