{% assign diff_1 = 0 | times: 1 %}
{% assign diff_2 = 0 | times: 1 %}
{% assign diff_3 = 0 | times: 1 %}

{% assign time_1 = 0 | times: 1 %}
{% assign time_2 = 0 | times: 1 %}
{% assign time_3 = 0 | times: 1 %}
{% assign time_4 = 0 | times: 1 %}
{% assign time_5 = 0 | times: 1 %}

{% assign co_categories = '' | split: '' %}
{% for co in courses.in_catalog %}

  {% for cat in co.categories %}
    {% assign cat_name = cat.name | split: '!@#$%^&*()' %}
    {% assign co_categories = co_categories | concat: cat_name %}
  {% endfor %}

  {% case co.properties.difficulty %}
    {% when "Beginner" %}
      {% assign diff_1 = diff_1 | plus: 1 %}
    {% when "Advanced" %}
      {% assign diff_2 = diff_2 | plus: 1 %}
    {% when "Expert" %}
      {% assign diff_3 = diff_3 | plus: 1 %}
  {% endcase %}

  {% if co.properties.course_time < 10 %}
    {% assign time_1 = time_1 | plus: 1 %}
  {% elsif co.properties.course_time < 30 %}
    {% assign time_2 = time_2 | plus: 1 %}
  {% elsif co.properties.course_time < 60 %}
    {% assign time_3 = time_3 | plus: 1 %}
  {% elsif co.properties.course_time < 120 %}
    {% assign time_4 = time_4 | plus: 1 %}
  {% else %}
    {% assign time_5 = time_5 | plus: 1 %}
  {% endif %}

{% endfor %}
{% assign co_unique_categories = co_categories | uniq | sort %}




<div class="filter">
  <div class='filter-section'>
    <div class='filter-title'>
      CATEGORY
    </div>
    <div class='filter-element-category category-selected' category='none'>
      All
    </div>
    {% for cat in co_unique_categories %}
      {% assign number_of_courses = co_categories | split: cat %}
      {% assign number_of_courses = number_of_courses.size | minus: 1 %}
      <div class='filter-element-category' category='{{cat}}'>
        {{ cat }} ({{ number_of_courses }})
      </div>
    {% endfor %}
  </div>

  <div class='filter-section'>
    <div class='filter-title'>
      DIFFICULTY
    </div>
    <div class='filter-element-diff {% if diff_1 == 0 %} disabled {% endif %}' diff='1'>
      <i class="fal fa-square"></i>
      <i class="fa-solid fa-square-check"></i>
      Beginner ({{ diff_1 }})
    </div>
    <div class='filter-element-diff {% if diff_2 == 0 %} disabled {% endif %}' diff='2'>
      <i class="fal fa-square"></i>
      <i class="fa-solid fa-square-check"></i>
      Advanced ({{ diff_2 }})
    </div>
    <div class='filter-element-diff {% if diff_3 == 0 %} disabled {% endif %}' diff='3'>
      <i class="fal fa-square"></i>
      <i class="fa-solid fa-square-check"></i>
      Expert ({{ diff_3 }})
    </div>
  </div>

  <div class='filter-section'>
    <div class='filter-title'>
      DURATION
    </div>
    <div class='filter-element-time {% if time_1 == 0 %} disabled {% endif %}' time='1'>
      <i class="fal fa-square"></i>
      <i class="fa-solid fa-square-check"></i>
      &lt; 10 mins ({{ time_1 }})
    </div>
    <div class='filter-element-time {% if time_2 == 0 %} disabled {% endif %}' time='2'>
      <i class="fal fa-square"></i>
      <i class="fa-solid fa-square-check"></i>
      10-30 mins ({{ time_2 }})
    </div>
    <div class='filter-element-time {% if time_3 == 0 %} disabled {% endif %}' time='3'>
      <i class="fal fa-square"></i>
      <i class="fa-solid fa-square-check"></i>
      30-60 mins ({{ time_3 }})
    </div>
    <div class='filter-element-time {% if time_4 == 0 %} disabled {% endif %}' time='4'>
      <i class="fal fa-square"></i>
      <i class="fa-solid fa-square-check"></i>
      1-2 hours ({{ time_4 }})
    </div>
    <div class='filter-element-time {% if time_5 == 0 %} disabled {% endif %}' time='5'>
      <i class="fal fa-square"></i>
      <i class="fa-solid fa-square-check"></i>
      &gt; 2 hours ({{ time_5 }})
    </div>
  </div>
</div>

<style>
  .filter-title {
    font-weight: 500;
    letter-spacing: 3px;
    opacity: 0.4;
    margin-bottom: 16px;
  }
  .filter-section {
    margin-bottom: 30px;
  }
  div[class^="filter-element"] {
    margin-bottom: 15px;
    cursor: pointer;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 32px;
  }
  .category-selected {
    font-weight: 800 !important;
  }
  div[class^="filter-element"] .fa-square {
    margin-right: 10px;
  }
  .filter-element-diff .fa-square-check {
    display: none;
    margin-right: 10px;
  }
  .diff-selected .fa-square-check {
    display: inline-block;
  }
  .diff-selected .fa-square {
    display: none;
  }
  .filter-element-time .fa-square-check {
    display: none;
    margin-right: 10px;
  }
  .time-selected .fa-square-check {
    display: inline-block;
  }
  .time-selected .fa-square {
    display: none;
  }
  .disabled {
    opacity: 0.6;
    cursor: none;
    pointer-events: none;
  }
</style>