{% assign content_counter = 0 %}

{% for course in courses.in_catalog %}
    {% for category in course.categories %}
        {% if category.name == 'Recommended' %}
            {% assign content_counter = content_counter | plus: 1 %}
        {% endif %}
    {% endfor %}
{% endfor %}
{% for learning_path in learning_paths.available %}
    {% for category in learning_path.categories %}
        {% if category.name == 'Recommended' %}
            {% assign content_counter = content_counter | plus: 1 %}
        {% endif %}
    {% endfor %}
{% endfor %}

<div class="recommended-carousel-wrapper">
    <div class="recommended-carousel">
        {% for course in courses.in_catalog%}
            {% for category in course.categories %}
                {% if category.name == 'Recommended' %}
                    <div class="carousel-card-container">
                        {% include "cards_course" with course %}
                    </div>
                {% endif %}
            {% endfor %}
        {% endfor %}
        {% for learning_path in learning_paths.available %}
            {% for category in learning_path.categories %}
                {% if category.name == 'Recommended' %}
                    <div class="carousel-card-container">
                        {% include "cards_learning_path" %}
                    </div>
                {% endif %}
            {% endfor %}
        {% endfor %}
    </div>
</div>

<script>
    $(".recommended-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;
}
.recommended-carousel-wrapper {
    position: relative;
  }
.next-btn {
    position: absolute;
    right: 20px;
    bottom: 0;
}
.prev-btn {
    position: absolute;
    right: 100px;
    bottom: 0;
    z-index:1;
}
</style>