{% 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"></span>
      <span class="lang-es"></span>
      <span class="lang-fr"></span>
      <span class="lang-br"></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>
  addEventListener('DOMContentLoaded', () => {
    const categoriesOrder = ['ALL',
      '251e90cf-758d-4f98-9256-9d1d40e24872',
      'b3c41203-7160-4d6f-bd77-5861bdddcfcd',
      'ca378022-dcac-444b-af34-64fdd6527faa',
      '0c4cda69-4ea9-4ad9-b279-19233daf043b',
      '389df920-414a-4657-9aa7-f6521f26bf3c',
      'c0cac114-466c-4952-85e9-aa19023999fa',
      '46f1a20a-6948-44eb-9b4a-1f924bbe46c4',
      'c082a8e4-00d3-4687-8b84-3dd1bb6c0c9e',
      '8604578e-22c9-4886-9943-43b1e2957615',
      'c53e5d73-dbd7-479b-ad7a-4e77a41cf62f',
      '49a29fce-cdd6-4af4-903a-0d1b58e1194a',
      '59e5408f-6538-4581-ac4f-5cfbcfa1c29a'
    ]
    let filtersWrapper = document.querySelector('.courses-filter');
    categoriesOrder.forEach(category => {
      let filter = document.querySelector(`.courses-filter-item[category-uuid="${category}"]`)
      if (filter)
        filtersWrapper.appendChild(filter);
    });
    document.querySelectorAll('.courses-filter-hidden .courses-filter-item').forEach(filter => {
      filtersWrapper.appendChild(filter);
    });
  });
  
  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>
