<div class="np-filter product-filter-container">
  <div class="dropdown">
    <select
      class="product-filter-dropdown np-input"
      type="text"
      name="product-filter-dropdown"
      id="product-filter-dropdown"
      onchange="filterByProduct()"
    >
      <option class="product-filter-entry" value="Default" selected>Product</option>
    </select>
  </div>
</div>

<script>
  let allProductTypesHome = ['Anthology-Default'];
  let allProductTypesDash = ['Anthology-Default'];
  let productFilterEl = document.querySelector("#product-filter-dropdown");

  {% for course in courses.enrolled %}
    {% if course.progress == 0 or course.properties.most_popular == true %}
      if('{{ course.properties.product_names_for_course_cards }}' != 'Anthology [Catch-all]'){
        if(!allProductTypesHome.includes('{{ course.properties.product_names_for_course_cards }}')){
          allProductTypesHome.push("{{ course.properties.product_names_for_course_cards }}");
        }
      }
    {% endif %}
  {% endfor %}

  {% for course in courses.enrolled %}
    {% unless course.progress == 0 %}
      if('{{ course.properties.product_names_for_course_cards }}' != 'Anthology [Catch-all]'){
        if(!allProductTypesDash.includes('{{ course.properties.product_names_for_course_cards }}')){
          allProductTypesDash.push("{{ course.properties.product_names_for_course_cards }}");
        }
      }
    {% endunless %}
  {% endfor %}

  allProductTypesHome = allProductTypesHome.sort();
  allProductTypesDash = allProductTypesDash.sort();

  {% if page == 'Homepage' %}
    if(allProductTypesHome.length > 1){
      allProductTypesHome.map((product) => {
        if(product != 'Anthology-Default'){
          if(product.indexOf('&amp;') > -1){
            product = product.replace('&amp;', '&');
          }
          let productOption = document.createElement('option');
          productOption.classList.add('product-filter-entry');
          productOption.setAttribute('value', product);
          productOption.innerHTML = `${product}`;
          productFilterEl.appendChild(productOption);
        }
      })
    } else {
      productFilterEl.style.display = 'none';
    }

    let filterByProduct = () => {
      console.log(event.target.value);

      let allLearning = document.querySelector('.np-catalog-courses').children;

      for(let i = 0; i < allLearning.length; i++){
        if(event.target.value == 'Default'){

          if(!allLearning[i].classList.contains('hidden-by-search')){
            allLearning[i].style.display = 'block';
          } 
          allLearning[i].classList.remove('filtered')
        } else {

          if(allLearning[i].dataset.product != event.target.value){
            allLearning[i].style.display = 'none';
            allLearning[i].classList.add('filtered');
          } else {
            if(!allLearning[i].classList.contains('hidden-by-search')){
              allLearning[i].style.display = 'block';
            }
            allLearning[i].classList.remove('filtered');
          };
        };
      };

      //for(let i = 0; i < popular.length; i++){
      //  if(event.target.value == 'Default'){
      //    popular[i].style.display = 'block';
      //  } else {
      //    if(popular[i].dataset.product != event.target.value){
      //      popular[i].style.display = 'none';
      //    } else {
      //      popular[i].style.display = 'block';
      //    };
      //  };
      //};
    }
  {% elsif page == 'Dashboard' %}
    if(allProductTypesDash.length > 1){
      allProductTypesDash.map((product) => {
        if(product != 'Anthology-Default'){
          if(product.indexOf('&amp;') > -1){
            product = product.replace('&amp;', '&');
          }
          let productOption = document.createElement('option');
          productOption.classList.add('product-filter-entry');
          productOption.setAttribute('value', product)
          productOption.innerHTML = `${product}`;

          productFilterEl.appendChild(productOption);
        }
      })
    } else {
      productFilterEl.style.display = 'none';
      document.querySelector('.view-swapper-container').style.marginBottom = '0';
    }

    let filterByProduct = () => {
      let inProgressCourses = document.querySelector('.courses-in-prog').children;
      let completedCourses = document.querySelector('.courses-completed').children;

      for(let i = 0; i < inProgressCourses.length; i++){
        if(event.target.value == 'Default'){
          inProgressCourses[i].style.display = 'block';
        } else {
          //console.log(event.target.value)
          //console.log(inProgressCourses[i].dataset.product)
          if(inProgressCourses[i].dataset.product != event.target.value){
            inProgressCourses[i].style.display = 'none';
          } else {
            inProgressCourses[i].style.display = 'block';
          }
        }
      }

      for(let i = 0; i < completedCourses.length; i++){
        if(event.target.value == 'Default'){
          completedCourses[i].style.display = 'block';
        } else {
          console.log(completedCourses[i].dataset.product)
          if(completedCourses[i].dataset.product != event.target.value){
            completedCourses[i].style.display = 'none';
          } else {
            completedCourses[i].style.display = 'block';
          }
        }
      }
    }
  {% endif %}
</script>

<style>
  .filtered{
    display: none !important;
  }
</style>