{% if courses.in_catalog.any? %}
  <div class="" id="catalog-courses">
    {% for course in courses.in_catalog %}
      <div  order="{{course.properties.course_order}}">
        {% include "cards_course" with course %}
      </div>
    {% endfor %}
  </div>
{% endif %}

<script>
 {% comment %} Courses order function  {% endcomment %}
 var list = document.getElementById('catalog-courses');

 var items = list.childNodes;
 var itemsArr = [];
 for (var i in items) {
   if (items[i].nodeType == 1) {
     itemsArr.push(items[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]);
 }
 {% comment %} Carousel function {% endcomment %}
  var list = document.getElementById('catalog-courses');

 $(document).ready(function(){
  $('#catalog-courses').slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
  });

}); 
</script>

