
<div class="carousel-buttons-container">
    <div class="homepage-resource-header most-popular-header">
        Most Popular
    </div>
    <div style="display: flex;">
        <div class="previous-carousel-button previous-courses-button" onclick="sliderPopular.goTo('prev')">
            <i class="far fa-solid fa-arrow-left"></i>
        </div>
        <div class="next-carousel-button next-courses-button" onclick="sliderPopular.goTo('next')">
            <i class="far fa-solid fa-arrow-right"></i>
        </div>
    </div>
</div>

<div class="row row-with-thumbnails popular-courses-carousel" style="margin: 0; padding: 5px;"}>
    {% for course in courses.in_catalog %}
        {% if course.properties.most_popular == true %}
            <div class="course-card-wrapper">
                {% include "cards_course" with course, flag: 'popular' %}
            </div>
        {% endif %}
    {% endfor %}
</div>

<script>
    var sliderPopular = tns({
        container: '.popular-courses-carousel',
        controls: false,
        items: 1,
        nav: false,
        navPosition: 'bottom',
        responsive: {
            1024:{
                items: 2
            },
            1200:{
                items: 3
            }
        }
    });
</script>
