{% assign content_counter = 0 %}

{% if current_person.groups.any? %}
  {% for group in current_person.groups %}
		{% for course in courses.enrolled %}
			{% for category in course.categories %}
				{% if group.id == '2d93e49d-48e0-4419-baf8-88f31ad78349' and category.name == 'Recommended - Access Agent ' %}
							{% assign content_counter = content_counter | plus: 1 %}
        {% elsif category.name == 'Recommended' %}
            {% assign content_counter = content_counter | plus: 1 %}
        {% endif %}
			{% endfor %}
		{% endfor %}
	{% endfor %}
{% endif %}
{% if current_person.groups.any? %}
  {% for group in current_person.groups %}
	{% for learning_path in learning_paths.available %}
			{% for category in learning_path.categories %}
				{% if group.id == '2d93e49d-48e0-4419-baf8-88f31ad78349' and category.name == 'Recommended - Access Agent ' %}
							{% assign content_counter = content_counter | plus: 1 %}
					{% elsif category.name == 'Recommended' %}
							{% assign content_counter = content_counter | plus: 1 %}
					{% endif %}
			{% endfor %}
		{% endfor %}
	{% endfor %}
{% endif %}
{% comment %}

{% endcomment%}
<div class="recommended-carousel-wrapper">
    <div class="recommended-carousel">
		{% if current_person.groups.any? %}
			{% for group in current_person.groups %}
						{% for course in courses.enrolled%}
								{% for category in course.categories %}
									{% if group.id == '2d93e49d-48e0-4419-baf8-88f31ad78349' and category.name == 'Recommended - Access Agent ' %}
												<div class="carousel-card-container">
														{% include "cards_course" with course %}
												</div>
										{% elsif category.name == 'Recommended' %}
												<div class="carousel-card-container">
														{% include "cards_course" with course %}
												</div>
										{% endif %}
								{% endfor %}
						{% endfor %}
					{% endfor %}
				{% endif %}
				{% if current_person.groups.any? %}
					{% for group in current_person.groups %}
						{% for learning_path in learning_paths.available %}
								{% for category in learning_path.categories %}
									{% if group.id == '2d93e49d-48e0-4419-baf8-88f31ad78349' and category.name == 'Recommended - Access Agent' %}
												<div class="carousel-card-container">
														{% include "cards_learning_path" %}
												</div>
										{% elsif category.name == 'Recommended' %}
												<div class="carousel-card-container">
														{% include "cards_learning_path" %}
												</div>
										{% endif %}
								{% endfor %}
							{% endfor %}
						{% endfor %}
					{% endif %}
    </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>