{% if uuids.size > 0 %}
  <div class="courses-filter">
    <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 }}">
        {% assign category_name = names | slice: y %}
        {% if category_name contains 'Pipedrive courses' %}
          <span class="lang-en">Pipedrive courses</span>
          <span class="lang-de">Pipedrive Kurse</span>
          <span class="lang-es">Cursos de Pipedrive</span>
          <span class="lang-fr">Cours de Pipedrive</span>
          <span class="lang-br">Cursos de Pipedrive</span>
        {% elsif category_name contains 'Sales courses' %}
          <span class="lang-en">Sales courses</span>
          <span class="lang-de">Vertriebskurse</span>
          <span class="lang-es">Cursos de Ventas</span>
          <span class="lang-fr">Cours de Vente</span>
          <span class="lang-br">Cursos de Vendas</span>
        {% elsif category_name contains 'Marketing courses' %}
          <span class="lang-en">Marketing courses</span>
          <span class="lang-de">Marketingkurse</span>
          <span class="lang-es">Cursos de Marketing</span>
          <span class="lang-fr">Cours de Marketing</span>
          <span class="lang-br">Cursos de Marketing</span>
        {% elsif category_name contains 'Spanish' %}
          <span class="lang-en">Spanish</span>
          <span class="lang-de">Spanisch</span>
          <span class="lang-es">Español</span>
          <span class="lang-fr">Espagnol</span>
          <span class="lang-br">Espanhol</span>
        {% else %}
          {{ category_name }}
        {% endif %}

      </div>
    {% endfor %}
  </div>
{% endif %}

<script>
  let frenchFilter = document.querySelector('[category-uuid = "757bff69-a942-40ba-9013-c111c35c0dff"]');
  let germanDeutchFilter = document.querySelector('[category-uuid = "923e6454-8e23-4e03-8c69-98d8b5c39fdd"]');
  let portugeseBRFilter = document.querySelector('[category-uuid = "93e4f5b0-c34e-4d9b-837b-ce36fd34d19e"]');
  let spanishFilter = document.querySelector('[category-uuid = "2f2aab71-9b6c-45fd-8b46-ef61cadb9927"]');

  frenchFilter.style.display = 'none';
  germanDeutchFilter.style.display = 'none';
  portugeseBRFilter.style.display = 'none';
  spanishFilter.style.display = 'none';
  //  if(window.location.href.includes('de-')){
  //  frenchFilter.style.display = 'none';
  //  portugeseBRFilter.style.display = 'none';
  //  spanishFilter.style.display = 'none';
  //} else if(window.location.href.includes('es-')){
  //  frenchFilter.style.display = 'none';
  //  germanDeutchFilter.style.display = 'none';
  //  portugeseBRFilter.style.display = 'none';
  //} else if(window.location.href.includes('fr-')){
  //  germanDeutchFilter.style.display = 'none';
  //  portugeseBRFilter.style.display = 'none';
  //  spanishFilter.style.display = 'none';
  //} else if(window.location.href.includes('br-')){
  //  frenchFilter.style.display = 'none';
  //  germanDeutchFilter.style.display = 'none';
  //  spanishFilter.style.display = 'none';
  //}
</script>

<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>
  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>
