{% if courses.in_catalog.any? %}
  {% assign any_filter = courses.filters | map: "selected?" %}
  {% if any_filter contains true %}
    {% include "filtered_catalog_courses" %}
  {% else %}
    {% include "categorised_catalog_courses" %}
  {% 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-name {
    font-weight: 700;
    color: #1b3e4f;
  }
</style>

<script>
  window.addEventListener("DOMContentLoaded", (event) => {
    hideEmptyCategories()
  })

  function hideEmptyCategories() {
    document.querySelectorAll("[id^='category']").forEach((item) => {
      if (item.querySelector(".row").children.length == 0) {
        item.style.display = "none"
      }
    })
  }
</script>