{% assign any_course = false %}
{% assign category_id = category_name | replace: " ", "-" %}

<div class="category-carousel-title np-homepage-featured-text" id="{{category_id}}-text">
  <div class="np-homepage-headline">
    {{ category_name }}
  </div>
  <div class="np-homepage-subheadline">
    {{ category_desc }}
  </div>
</div>

<div class="carousel-wrapper" id="{{category_id}}">
  {% for course in courses.in_catalog %}
    {% assign course_categories = course.categories | map: "name" %}
    {% if course_categories contains category_name %}
      {% assign any_course = true %}
      <div class="carousel-item">
        {% include "cards_course" with course %}
      </div>
    {% endif %}
  {% endfor %}
</div>

<script>
  var slider = tns({
    container: '#{{category_id}}',
    items: 1,
    slideBy: 'page',
    nav: false,
    controlsText: ["<i class='fal fa-angle-left arrow-left '></i>","<i class='fal fa-angle-right arrow-right'></i>"],
    responsive: {
      768: {
        items: 2
      },
      1140: {
        items: 3
      }
    }
  });
</script>

<style>
  {% unless any_course %}
    #{{category_id}}-text {
      display: none;
    }
  {% endunless %}

  .arrow-right {
    font-size: 2.5rem;
    margin-right: -2rem;
    color: #77728d;
  }
  .arrow-left {
    font-size: 2.5rem;
    margin-left: -2rem;
    color: #77728d;
  }
  .carousel-wrapper {
    display: flex;
  }
  .np-card {
    height: 100%;
    margin-bottom: 0px;
  }
  .tns-outer {
    position: relative;
    margin: 0 4% 20px;
  }
  .tns-controls {
    position: absolute;
    top: 45%;
    z-index: 11;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .tns-outer [aria-controls], .tns-outer [data-action] {
    cursor: pointer;
    background: none;
    border: none;
    color: #000
  }
  .carousel-wrapper .np-card {
    padding-bottom: 10px;
  }
</style>