{% assign sub_cat_talent_acquisition = "JOB POSTING, APPLICANT MANAGEMENT, DOCUMENT MANAGEMENT, SETTINGS, TEMPLATES, REPORTS" %}
{% assign sub_cat_workforce_management = "SETTINGS, REQUESTS, NOTIFICATIONS, COMMSHUB, LOGBOOK, SCHEDULE, FORECASTING, TEAMHUB, REPORTS, TIMESHEETS, ENGAGE" %}
{% assign sub_cat_harri_iq = "SOURCE & HIRE REPORTS, TEAMLIVE REPORTS, HARRI IQ, UK PAYROLL REPORTS" %}
{% assign sub_cat_employee_engagement = "CARRI, COMMSHUB" %}

<div class="video-sub-filters">

  <div class="sub-filter-group" data-parent="TALENT ACQUISITION">
    {% for category in categories.in_catalog %}
      {% assign category_name_upcase = category.name | upcase %}
      {% if sub_cat_talent_acquisition contains category_name_upcase %}
        <div class="sub-filter">{{category.name}}</div>
      {% endif %}
    {% endfor %}
  </div>

  <div class="sub-filter-group" data-parent="WORKFORCE MANAGEMENT">
    {% for category in categories.in_catalog %}
      {% assign category_name_upcase = category.name | upcase %}
      {% if sub_cat_workforce_management contains category_name_upcase %}
        <div class="sub-filter">{{category.name}}</div>
      {% endif %}
    {% endfor %}
  </div>

  <div class="sub-filter-group" data-parent="HARRI IQ & REPORTING">
    {% for category in categories.in_catalog %}
      {% assign category_name_upcase = category.name | upcase %}
      {% if sub_cat_harri_iq contains category_name_upcase %}
        <div class="sub-filter">{{category.name}}</div>
      {% endif %}
    {% endfor %}
  </div>

  <div class="sub-filter-group" data-parent="EMPLOYEE ENGAGEMENT">
    {% for category in categories.in_catalog %}
      {% assign category_name_upcase = category.name | upcase %}
      {% if sub_cat_employee_engagement contains category_name_upcase %}
        <div class="sub-filter">{{category.name}}</div>
      {% endif %}
    {% endfor %}
  </div>

</div>

<style>
  .video-sub-filters {
    max-width: 1200px;
    margin: 0 auto 32px;
  }

  .sub-filter-group {
    display: none;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    margin-top:16px;
  }

  .sub-filter-group.active {
    display: flex;
  }

  .sub-filter {
    font-size:18px;
    padding: 0 16px 32px;
    width: auto;
    cursor:pointer;
    text-align:center;
    text-align: center;
    font-weight:700;
  }

  .sub-filter:hover {
    text-decoration:underline;
  }

  .sub-filter.active {
    text-decoration:underline;
    font-weight:700;
  }

  @media (min-width:768px) {
    .sub-filter {
      font-size:20px;
      padding: 0 24px 32px;
    }
  }
</style>