{% if uuids.size > 0 %}
  <div class="webinars-filter">
    <div class="webinars-filter-item webinars-filter-item-active body-s strong" onclick="filterItems(this)" category-uuid="ALL">
      <span >All topics</span>
    </div>
    {% for x in (1..uuids.size) %}
      {% assign y = x | minus: 1 %}
      <div class="webinars-filter-item body-s strong" onclick="filterItems(this)" category-uuid="{{ uuids | slice: y }}">
        {{ names | slice: y }}
      </div>
    {% endfor %}
  </div>
{% endif %}

<style>
  .webinars-filter {
    display: flex;
    gap: 10px;
    margin-top: 40px;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  .webinars-filter-item {
    padding: 10px 20px;
    border: 2px solid #E4E6E9;
    border-radius: 300px;
    color: #656E7A;
    white-space: nowrap;
    cursor: pointer;
  }

  .webinars-filter-item:not(.webinars-filter-item-active):hover {
    color: var(--black-digital);
  }

  .webinars-filter-item-active {
    color: var(--green);
    border: 2px solid var(--green);
    cursor: default;
  }

  .category-hidden {
    display: none !important;
  }
</style>

<script>
  window.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.webinars-card-description').forEach((x) => {
      $clamp(x, {clamp: 5});
    })
  
    {% if current_school.sso_active? %}
      var categoriesOrder = ['ALL',
        'e2af61ed-3fbc-448d-9d88-3a66b44735b3',
        '8fff4f04-75a5-43df-ae71-1fb4efb052a6',
        '5e2da7ac-8c87-49a2-b385-c5be91c0217f'
      ]
    {% else %}
      var categoriesOrder = ['ALL',
        'b62b5946-6a39-4fac-90e2-87b921620aa4',
        'db1bb7fd-bb8f-4939-a731-e9f8e5005370',
        '41abb409-d6f4-4ee9-b07e-0320dc3cc719'
      ]
    {% endif %}
    
    let filtersWrapper = document.querySelector('.webinars-filter');
    let webinarsWrapper = document.querySelector('.webinars');
    categoriesOrder.forEach(category => {
      let filter = document.querySelector(`.webinars-filter-item[category-uuid="${category}"]`)
      if (filter)
        filtersWrapper.appendChild(filter);
      if (category !== 'ALL') {
        let webinarsSection = document.querySelector(`.webinar-section[item-categories="${category}"]`);
        if (webinarsSection) {
          webinarsWrapper.appendChild(webinarsSection);
        }
      }
    });
    document.querySelectorAll('.webinars-filter-hidden .webinars-filter-item').forEach(filter => {
      filtersWrapper.appendChild(filter);
    });
    document.querySelectorAll('.webinars-hidden .webinars-section').forEach(webinarsSection => {
      webinarsWrapper.appendChild(webinarsSection);
    });
  })

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