<section class="filter-section">
    <div class="filter-section-container">
      <div class="filter-heading">
        <div class="heading">My Courses</div>
      </div>
      <div class="filters-wrapper">
        <div class="filter-categories-container default-swapper">
          <div class="filter-category filter-category-active" id="cat1" onclick="filterCarousel('enrolled', this)">
            Assigned
          </div>
          <div class="filter-category " id="cat2" onclick="filterCarousel('in-progress', this)">
            In Progress
          </div>
          <div class="filter-category " id="cat3" onclick="filterCarousel('completed', this)">
            Completed
          </div>
        </div>

        <div class="filter-categories-container mobile-swapper">
          <div class="filter-category filter-category-mobile filter-category-active-mobile" id="cat1-mobile" onclick="filterCarousel('enrolled', this)">
            Assigned
          </div>
          <div class="filter-category filter-category-mobile" id="cat2-mobile" onclick="filterCarousel('in-progress', this)">
            In Progress
          </div>
          <div class="filter-category filter-category-mobile" id="cat3-mobile" onclick="filterCarousel('completed', this)">
            Completed
          </div>
        </div>
      </div>
    </div>
  </section>
<div class="carousel-container">
  <div class="dashboard-carousel-wrapper " id="carousel-courses-enrolled">
    {% if courses.enrolled.any? %}
      <div class="dashboard-carousel row" >
        {% for course in courses.enrolled %}
            {% include "cards_course" with course %}
        {% endfor %}
      </div>
    {% endif %}
  </div>
</div>

<div class="carousel-container">
  <div class="dashboard-carousel-wrapper np-hidden" id="carousel-courses-in-progress">
    {% assign is_progress = false %}
      <div class="dashboard-carousel row" >
        {% for course in courses.enrolled %}
            {% if course.started? and course.completed? == false%}
              {% assign is_progress = true %}
              {% include "cards_course" with course %}
            {% endif %}
        {% endfor %}
      </div>
  </div>
</div>


<div class="carousel-container">
  <div class="dashboard-carousel-wrapper np-hidden" id="carousel-courses-completed">
    {% assign is_progress = false %}
      <div class="dashboard-carousel row" >
        {% for course in courses.enrolled %}
            {% if course.completed? %}
              {% assign is_progress = true %}
              {% include "cards_course" with course %}
            {% endif %}
        {% endfor %}
      </div>
  </div>
</div>


<style>
  .click {
    background: #2356B2;
    color: #fff
  }
  #cat1 {
    border-radius: 8px 0 0 8px;
  }
  #cat3 {
    border-radius: 0 8px 8px 0;
  }

</style>

<script>
  document.querySelectorAll('.dashboard-carousel').forEach( x => {
    var i = 0

    var slider = tns({
      container: x,
      items: 3,
      controls: true,
      controlsText: ['<i class="fal fa-chevron-left left-arrow"></i>', '<i class="fal fa-chevron-right right-arrow"></i>'],
      responsive: {
        300: {
          edgePadding: 20,
          gutter: 20,
          items: 1
        },
        700: {
          gutter: 30
        },
        900: {
          items: 3
        }
      }
    });

    Array.from(x.children).forEach( y => {
      if (y.id !== '')
        i++
    });

    if (i < 4 ) {
      if (i !== 1 && window.screen.availWidth < 700) console.log("not destroyed")
      else slider.destroy() 
    }
  })
  function filterCarousel(x, element) {
    document.querySelectorAll(".dashboard-carousel-wrapper").forEach(y => {
      if (y.id.includes(x)) {
        y.classList.remove('np-hidden');
      }
        
        else {
          y.classList.add('np-hidden');
        }
    })

    if(element.classList.contains('filter-category-mobile')){
      document.querySelector('.filter-category-active-mobile').classList.remove('filter-category-active-mobile');
      element.classList.add('filter-category-active-mobile');
    } else {
      document.querySelector('.filter-category-active').classList.remove('filter-category-active');
      element.classList.add('filter-category-active');
    }
  }


  </script>