{% if courses.enrolled.any? %}
  <div class="row row-with-thumbnails" id="filterProgress">
    {% for course in courses.enrolled %}
      {% assign course_categories = course.categories | map: "name" | join: ", " %}
      {% if course.categories.size > 0 %}
        <div class="{{ class }} course-card" data-categories="{{course_categories}}" style="display:none;">
          {% include "cards_course" with course %}
        </div>
      {% endif %}
    {% endfor %}
  </div>

  {% capture message %}
    {% t shared.zero_state.courses.index,
      key: current_school.course_vocabulary
    %}
  {% endcapture %}

  <div id="zero-state" class="np-hidden">{% include "courses_zero_state", message: message %}</div>
{% else %}
  {% capture message %}
    {% t shared.zero_state.courses.index,
      key: current_school.course_vocabulary
    %}
  {% endcapture %}
  {% include "courses_zero_state", message: message %}
{% endif %}

<script>
  const urlParams = new URLSearchParams(window.location.search);
  const categoryName = urlParams.get('category');
  const categoryNameUnformatted = categoryName.replaceAll("-", " ")

  $(".np-resource-title").text(categoryName.replaceAll("-", " "))

  if (categoryName) {

      document.querySelectorAll(`.course-card`).forEach(course => {
        const courseCategoriesNamesArr = $(course).attr("data-categories").split(", ")
        var lowercaseCourseCategoriesNamesArr = courseCategoriesNamesArr.map(v => v.toLowerCase());

        if (lowercaseCourseCategoriesNamesArr.includes(categoryNameUnformatted)) {
           $(course).show()
        }
      }) 
    
  } else {
    document.querySelector('#zero-state').classList.remove('np-hidden');
  }


</script>