{% assign product_education_course_categories = '' | split: '' %}

{% 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 "~[Product Education]" %}
      {% assign product_education_course_categories = product_education_course_categories | concat: cat_name %}
    {% endif %}
    
    {% comment %} {% if cat.name contains "Product Education" %}
      
      {% assign cat_name = cat.name | split: '!@#$%^&*()' %}

      {% if cat.name contains "~[Product Education]" %}
        {% assign second_level_course_categories = product_education_course_categories | concat: cat_name %}
      {% else %}
        {% assign top_level_course_categories = top_level_course_categories | concat: cat_name %}
      {% endif %}
    {% endif %} {% endcomment %}
  {% endfor %}
{% endfor %}

{% assign unique_product_education_course_categories = product_education_course_categories | uniq | sort %}

{% 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_product_education_course_categories %}
      <div class='filter-element-category' data-category='{{cat | remove: "~[Product Education] " }}'>
        <div class="top-level-filter">{{cat | remove: "~[Product Education] " }}</div>         
      </div>
    {% 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>
{% comment %} 
<script>
  $('document').ready(function() {
    $('.has-sub-categories .top-level-filter').click(function() {
      $(this).parent().toggleClass('filter-open')
    })
  })
</script> {% endcomment %}