{% if uuids.size > 0 %}
  <div class="courses-filter-hidden np-hidden">
    <div class="courses-filter-item courses-filter-item-active body-s strong" onclick="filterItems(this)" category-uuid="ALL">
      <span class="lang-en">All topics</span>
      <span class="lang-de">Alle Themen</span>
      <span class="lang-es">Todos los temas</span>
      <span class="lang-fr">Tous les thèmes</span>
      <span class="lang-br">Todos os tópicos</span>
    </div>
    {% for x in (1..uuids.size) %}
      {% assign y = x | minus: 1 %}
      <div class="courses-filter-item body-s strong" onclick="filterItems(this)" category-uuid="{{ uuids | slice: y }}">
        {{ names | slice: y }}
      </div>
    {% endfor %}
  </div>
  <div class="courses-filter"></div>
{% endif %}

<style>
  .courses-filter {
    display: flex;
    gap: 10px;
    margin-top: 40px;
    flex-wrap: wrap;
  }
  .courses-filter-item {
    padding: 10px 20px;
    border: 2px solid #E4E6E9;
    border-radius: 300px;
    color: #656E7A;
    white-space: nowrap;
    cursor: pointer;
  }
  .courses-filter-item:not(.courses-filter-item-active):hover {
    color: var(--black-digital);
  }
  .courses-filter-item-active {
    color: var(--green);
    border: 2px solid var(--green);
    cursor: default;
  }
  .category-hidden {
    display: none !important;
  }
</style>

<script>
  let previousFilter = window.sessionStorage.getItem('last-selected-video-filter');
  if (previousFilter) {
    addEventListener('DOMContentLoaded', () => {
      document.querySelector(`.courses-filter-item[category-uuid="${previousFilter}"]`)?.click();
    });
  }
  
  function filterItems(element) {
    if (!element.classList.contains(('courses-filter-item-active'))) {
      document.querySelector('.courses-filter-item-active').classList.remove('courses-filter-item-active');
      element.classList.add('courses-filter-item-active');
      let selectedCategoryUUID = element.getAttribute('category-uuid');
      document.querySelectorAll('.courses-section-expanded').forEach(x => {x.classList.remove('courses-section-expanded')});
      document.querySelectorAll('.courses-section-filtered').forEach(x => {x.classList.remove('courses-section-filtered')});
      document.querySelectorAll('[item-categories]').forEach(x => {x.classList.remove('category-hidden')});
      if (selectedCategoryUUID !== 'ALL') {
        document.querySelectorAll(".courses-section").forEach(x => {
          if (x.getAttribute('item-categories') === selectedCategoryUUID) {
            x.classList.add('courses-section-expanded');
            x.classList.add('courses-section-filtered');
          } else {
            x.classList.add('category-hidden');
          }
        });
      }
      window.sessionStorage.setItem('last-selected-video-filter', selectedCategoryUUID);
    }
  }
</script>
