{% assign top_level_course_categories = '' | split: '' %}
{% assign second_level_course_categories = '' | split: '' %}

{% for course in catalog_courses %}

  {% for cat in course.categories %} 
      {% assign cat_name = cat.name | split: '!@#$%^&*()' %}
      {% if cat.name contains "~" %}
        {% assign second_level_course_categories = second_level_course_categories | concat: cat_name %}
      {% else %}
        {% assign top_level_course_categories = top_level_course_categories | concat: cat_name %}
      {% endif %}
  {% endfor %}
{% endfor %}

{% assign unique_top_level_course_categories = top_level_course_categories | uniq | sort %}
{% assign unique_second_level_course_categories = second_level_course_categories | uniq | sort %}

<div class="categories-filter">
  <div class='filter-section'>
    <div class='filter-title'>
      TOPICS
    </div>
    <div class='filter-element-category category-selected' data-category='all'>
      All
    </div>
    {% for cat in unique_top_level_course_categories %}

      {% assign number_of_courses = top_level_course_categories | split: cat %}
      {% assign number_of_courses = number_of_courses.size | minus: 1 %}

      {% assign has_sub_cat = false %}
      {% for sub_cat in unique_second_level_course_categories %}     
        {% if sub_cat contains cat %}
          {% assign has_sub_cat = true %}
        {% endif %}
      {% endfor %}

      {% if has_sub_cat %}
        <div class='filter-element-category has-sub-categories' data-category='{{cat}}'>
          <div class="top-level-filter">{{ cat }} <i class="fas fa-caret-right"></i></div>      
            <div class="filter-item-sub-categories">
              {% for sub_cat in unique_second_level_course_categories %}   
                <div class="filter-item-sub-category" data-category='{{sub_cat | remove: "~" | remove: "[" | remove: "]" | remove: cat}}'>{{sub_cat | remove: "~" | remove: "[" | remove: "]" | remove: cat}}</div>
              {% endfor %}
            </div>      
        </div>
      {% else %}
        <div class='filter-element-category' data-category='{{cat}}'>
          <div class="top-level-filter">{{ cat }}</div>      
           
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>

<style>

  .filter-title {
    font-weight: 500;
    letter-spacing: 3px;
    opacity: 0.7;
    margin-bottom: 16px;
  }
  .filter-section {
    margin-bottom: 30px;
  }

  .filter-element-category {
    margin-bottom: 16px;
    cursor: pointer;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
  }

  .top-level-filter .fa-caret-right {
    margin-left:8px;
  }


  .filter-item-sub-categories {
    margin-left:24px;
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition:all 0.2s;
  }

   .filter-element-category.has-sub-categories.filter-open .fa-caret-right {
    transform:rotate(90deg)
  }

  .filter-element-category.has-sub-categories.filter-open .filter-item-sub-categories {
    height: auto;
    opacity: 1;
    overflow: visible;
  }

  .filter-item-sub-category {
    font-size: 16px;
    line-height: 20px;
    margin-top: 12px;
  }

  .filter-element-category:not(.has-sub-categories).category-selected,
  .filter-item-sub-category.category-selected {
    font-weight: 800 !important;
  }

  @media (min-width:768px) {
    .categories-filter {
      border-right: 1px solid #ddd;
      padding-right: 16px;
      padding-bottom: 32px;
      margin-right:16px;
    }
  }

</style>