<div class="courses-filter">
  <div class="courses-filter-title">
    Categories
  </div>
  <div class="courses-filter-item courses-filter-item-active" filter-category="ALL" onclick="filterCourses(this);">
    All
  </div>
  {% for category in categories.in_catalog %}
    <div class="courses-filter-item" filter-category="{{ category.id }}" onclick="filterCourses(this);">
      {{ category.name }}
    </div>
  {% endfor %}
</div>

<script>
  function filterCourses(element) {
    let categoryId = element.getAttribute('filter-category');
    document.querySelector('.courses-filter-item-active').classList.remove('courses-filter-item-active');
    element.classList.add('courses-filter-item-active');
    if (categoryId === 'ALL') {
      document.querySelectorAll('.filter-hidden').forEach(x => {
        x.classList.remove('filter-hidden');
      });
    } else {
      document.querySelectorAll('[course-category]').forEach(x => {
        if (x.getAttribute('course-category').includes(categoryId)) {
          x.classList.remove('filter-hidden');
        } else {
          x.classList.add('filter-hidden');
        }
      });
    }
  }
</script>
