<div class="main-courses-filter-wrapper">
  <div class="main-courses-filters" id="filters-carousel">
    <div class="main-courses-filter-item main-courses-filter-item-active" onclick="switchCategory('ALL', this)">
        All Categories
    </div>
    {% for category in categories.enrolled %}
      <div class="main-courses-filter-item" onclick="switchCategory('{{ category.id }}', this)">
          {{ category.name }}
      </div>
    {% endfor %}
  </div>
</div>

<style>
  .main-courses-filter-wrapper {
    width: 90%;
    margin: 0 auto 30px;
    position: relative;
  }
  .main-courses-filters {
    display: flex;
    margin-top: 0;
    width: fit-content;
  }
  .main-courses-filter-item {
    margin: auto 8px;
    padding: 5px 8px;
    text-align: center;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; 
}
  .main-courses-filter-item-active {
    background: #F4F1FE;
    border-radius: 6px;
  }
  .tns-controls {
    position: absolute;
    width: 110%;
    top: -10%;
    z-index: 10;
    height: 120%;
    left: -5%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
  }
  .tns-controls > * {
    visibility: hidden;
    width: 15%;
    position: relative;
  }
  .tns-controls > *:after {
    visibility: visible;
    height: 100%;
    position: absolute;
    border: none;
    content: '';
    width: 100% ;
    background: linear-gradient(to right, rgba(255,255,255, 0), rgba(255, 255, 255, 0.8) 50% );
    right: 0;
    top: 0;
  }
  .tns-controls > *:first-child:after {
    transform: rotate(180deg);
    left: 0;
  }
  .tns-controls > *:disabled:after {
    visibility: hidden !important;
  }
  .hidden-course {
    display: none;
  }
</style>

<script>
  function switchCategory(categoryID, buttonElement) {
    document.querySelector('.main-courses-filter-item-active').classList.remove('main-courses-filter-item-active');
    buttonElement.classList.add('main-courses-filter-item-active');
    document.querySelectorAll('.dashboard-course.hidden-course').forEach(element => {
      element.classList.remove('hidden-course');
    })
    if (categoryID != 'ALL') {
      document.querySelectorAll(`.dashboard-course:not([categories*="${categoryID}"])`).forEach(element => {
        element.classList.add('hidden-course');
      })
    }
  }

  window.addEventListener('DOMContentLoaded', function() {
    var filtersSlider = tns({
      container: '#filters-carousel',
      controls: true,
      loop: false,
      mouseDrag: true,
      swipeAngle: false,
      items: 5,
      nav: false
    });
  })
</script>