<hr class="rounded">

<div class="{{class_name}}-courses-section">
  <div class="carousel-text-wrapper">
    <div class="heading-carousel-section">
      <div class="heading">
        {{ heading }}
      </div>
      <div class="sub-heading">
        {{ sub_heading }}
      </div>
    </div>
  </div>

  <div class="carousel-container">
    <div class="categories-carousel-wrapper" >
        {% assign is_swift_features = false %}
        {% if courses.in_catalog.any? %}


          <div class="{{class_name}}-courses-carousel row" id="catalog-{{class_name}}-courses">
            {% for course in courses.in_catalog %}
                {% assign categories_name = course.categories | map: 'name'| join: ' ' %}
                {% if categories_name contains category_name %}
                  {% assign is_swift_features = true %}
                  {% include "cards_course" with course %}
                {% endif %}
            {% endfor %}
         </div>



        {% endif %}
      </div>
  </div>
</div>

<script>
    list = document.getElementById('catalog-{{ class_name }}-courses');
    childNodes = list.childNodes;
    children = list.children;
    itemsArr = [];

    function applyCarousel(){
        document.querySelectorAll('.{{class_name}}-courses-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
                    },
                    768: {
                        items: 2
                    },
                    1024: {
                        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")
                  }
                }
            })
        })
    }

    for(let i = 0; i < children.length; i++){
        if(children[i].getAttribute('order')){
            itemsArr.push(children[i]);
        }
    }

    itemsArr.sort(function (a, b) {
       return a.getAttribute('order') == b.getAttribute('order') ? 0 : a.getAttribute('order') > b.getAttribute('order') ? 1 : -1;
    });

    for (i = 0; i < itemsArr.length; ++i) {
        list.appendChild(itemsArr[i]);
        if(i == itemsArr.length-1){
            applyCarousel();
        }
    }
</script>