{% if courses.in_catalog.any? %}    
  {% if current_school.filterable_categories.any? %}
    {% assign categories_by_name = current_school.filterable_categories | sort: "name" %}

    {% for category in categories_by_name %}
      <div class="np-catalog-courses" data-name="{{ category.name }}" data-uuid="{{ category.id }}">
        <div class="category-header-wrapper">
          <h2 class="category-header">{{category.name}}</h2>
        </div>
        
        <div class="row row-with-thumbnails">
          {% for course in courses.in_catalog %}           
            {% for course_category in course.categories %}
              {% if course_category.name == category.name %}
                  <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
                    {% include "cards_course" with course %}
                  </div>
              {% endif %}
            {% endfor %}
          {% endfor %}
        </div>
      </div>         
    {% endfor %}
    
  {% endif %}
{% else %}
  {% capture message %}
    {% t shared.zero_state.courses.catalog,
      key: current_school.course_vocabulary
    %}
  {% endcapture %}
  {% include "courses_zero_state", message: message %}
{% endif %}

<style>
  .category-header-wrapper{
    display:flex;
    padding-bottom: 14px;
    padding-left: 14px;
    border-bottom: 1px solid #212b35;
    margin-bottom: 32px;
    align-items: end;
    justify-content: space-between;
  }

  .category-header{
    margin: 0;
  }

  @media screen and (min-width: 768px){
    .np-catalog-courses{
      margin-top: 0;
    }
  }
</style>