{% if courses.in_catalog.any? %}
  <div class="np-catalog-courses row row-with-thumbnails" id="catalog-courses">
    {% for course in courses.in_catalog %}
      <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content" order="{{course.properties.course_order}}">
        {% include "cards_course" with course %}
      </div>
    {% endfor %}
  </div>
{% else %}
  {% capture message %}
    {% t shared.zero_state.courses.catalog,
      key: current_school.course_vocabulary
    %}
  {% endcapture %}
  {% include "courses_zero_state", message: message %}
{% endif %}

<script>
  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]);
  }
</script>
