{% assign topic_classname = topic | split: " " %}

<div class="courses-carousel np-carousel" data-topic="{{ topic_classname | join: '-' | downcase }}">
        {% assign sorted_items =items | sort: "name" %}
        {% for course in courses.in_catalog %}
            {% 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-card {{course_status}}"> {% include "onboarding_cards_course" with course %}</div>
            {% endfor %}
</div>

<script>

$(document).ready(function(){

    $(".courses-carousel").not('.slick-initialized').slick({
        slidesToShow: 3,
        cssEase: 'linear',
        prevArrow: '<i class="fal fa-chevron-left left-arrow"></i>',
        nextArrow: '<i class="fal fa-chevron-right right-arrow"></i>',
        infinite: false,
        responsive: [
            {
                breakpoint: 1170,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                    dots: false,
                    arrows: true,
                }
            }
        ]
    });  
});
	
</script>

<script>
  document.addEventListener("DOMContentLoaded", function(){
    let npHideLang = getCookie("npLang");
    if (npHideLang == "es")
    {
      npHideLang = "English";
    }
    else if (npHideLang == "en")
    {
      npHideLang = "Spanish";
    }
    var element = document.querySelectorAll(`[language=${npHideLang}]`);
    element.forEach(card => {card.classList.add("np-hidden")});
  })
  function getCookie(name) {
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1) {
      begin = dc.indexOf(prefix);
      if (begin != 0) return null;
    }
    else
    {
      begin += 2;
      var end = document.cookie.indexOf(";", begin);
      if (end == -1) {
      end = dc.length;
      }
    }
    return decodeURI(dc.substring(begin + prefix.length, end));
  } 
</script>