<div class="np-homepage-featured-courses">
    <div id="previous-featured-course-button" onclick="featuredSlider.goTo('prev')">
        <i class="fal fa-chevron-left"></i>
    </div>

    <div class="featured-courses-carousel np-carousel">
        {% if items.any? %}
            {% assign sorted_items =items | sort: "name" %}
            {% for course in sorted_items %}

                {% comment %} USED FOR PROGRESS FILTER  {% endcomment %}
                {% assign course_status = "" %}

                {% if course.started? == false  %}
                    {% assign course_status = "not-started" %}
                {% elsif course.completed?  %}
                    {% assign course_status = "completed" %}
                {% elsif course.started?  %}
                    {% assign course_status = "in-progress" %}
                {% endif %}

                <div class="np-carousel-featured-card {{course_status}}"> 
                {% include "cards_featured_course" with course %}
                </div>
            {% endfor %}
        {% endif %}
        {%- comment -%} <div class="next-button" style="width: 100px; height: 50px; background: pink, position: absolute" onclick="nextSlide()"></div> {%- endcomment -%}
    </div>

    <div id="next-featured-course-button" onclick="featuredSlider.goTo('next')">
        <i class="fal fa-chevron-right"></i>
    </div>
</div>

<script>
    var featuredSlider = tns({
        container: '.featured-courses-carousel',
        controls: false,
        items: 1,
        navPosition: 'bottom',
        responsive: {
        }
    });
</script>

<style>
    .np-homepage-featured-courses{
      align-items: center;
      display: flex; 
      flex-direction: row;
      /* margin: 0 0.5% 1%; */
      margin: 0;
      margin-bottom: 1%;
    }

    .featured-courses-carousel{
        width: 100%;
    }

    #next-featured-course-button,
    #previous-featured-course-button{
        height: 20px;
        position: absolute;
        width: 20px;
        z-index: 50;
    }

    #next-featured-course-button{
        right: 25px;
    }

    #previous-featured-course-button{
        left: 15px;
    }

    .fal{
        align-items: center;
        background: #92d050;
        border-radius: 50%;
        display: flex;
        font-size: 24px;
        font-weight: 500;
        justify-content: center;
        height: 30px;
        width: 30px;
    }

    .fa-chevron-left{
        padding-right: 3px;
    }

    .fa-chevron-right{
        padding-left: 3px;
    }

    .tns-outer{
        max-width: 100%;
    }
    
    .tns-nav{
        text-align: center;
    }

    .tns-nav button{
        height: 16px;
        border-radius: 50%;
        margin: 0 3px;
    }

    .tns-nav .tns-nav-active{
        background: #004688;
    }

    @media screen and (min-width: 768px){
        /* .tns-outer{
            width: 95%;
        } */
        .featured-course-card{
            padding: 0 !important;
        }
    }
  .bqUfwS{
  display:none !important;
  }
</style>