{% include "header" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
  <div class="np-catalog-header-wrapper col-xs-12 col-md-9">
    <div class="np-catalog-header">
      <div class="np-resource-title np-catalog-title">Browse the Course Catalog</div>
      <div class="catalog-search">
        <form action="{% route search %}" method="get" data-test="desktop-search">
          <input
            aria-label="search"
            class="np-catalog-search"
            type="text"
            name="q"
            placeholder="search"
          />
          <i class="np-header-search-icon fa fa-search"></i>
        </form>
      </div>
    </div>
    </div>
  </div>

  <div class="np-hidden-desktop">
    <div class="mobile-filter-button">
      Filter
    </div>
  </div>

  <div class="catalog-content-wrapper row">
      <div class="col-xs-12 col-md-3">
        {% include "catalog_filters" %}
      </div></div>

      <div class="col-xs-12 col-md-9">
          {% include "courses_catalog" %}
      </div>
  </div>

</main>
{% include "footer" %}

<script>

const checkboxFilters = document.querySelectorAll("input[type='checkbox']");
const allItems = document.querySelectorAll(".catalog-item");

document.querySelector(".mobile-filter-button").addEventListener("click", function() {
  document.querySelector(".catalog-filters").classList.toggle("show")
})

document.querySelector(".close-tray").addEventListener("click", function() {
  document.querySelector(".catalog-filters").classList.toggle("show")
})

document.getElementById("clearAll").addEventListener("click", showAll);

checkboxFilters.forEach(function(checkbox) {
  checkbox.addEventListener('change', (event) => {
    filterAllItems()
  })
})

function showAll() {
  const catalogItems = document.querySelectorAll(".catalog-item");
  catalogItems.forEach((item) => item.style.display = "flex")  // show all courses
  checkboxFilters.forEach((filter) => filter.checked = false)  // Uncheck all filters
}

function filterAllItems() {
  allItems.forEach((item) => item.style.display = "none")  // show all courses

  let checkedFiltersCount = 0
  let checkedFilters = []
  checkboxFilters.forEach((filter) => {  
    if (filter.checked) {
      checkedFiltersCount++
      checkedFilters.push(filter.name)
    }
  }) 

  allItems.forEach((course) => {
    var includesAllCategories = checkedFilters.every(item => course.dataset.filters.includes(item));
    if (includesAllCategories) {
      console.log(course)
      course.style.display = "flex"
    }
  })
 
  if (checkedFiltersCount == 0) {
    allItems.forEach((item) => item.style.display = "flex")
  }
}
</script>

<style>
  .catalog-item {
    margin-bottom:32px;
  }

  .np-catalog.np-main {
    padding: 0 24px;
  }

  .np-catalog-header-wrapper {
    justify-content: center;
    margin-bottom:32px;
  }

  .np-catalog-header {
    align-items: center;
  }

  .catalog-content-wrapper .np-catalog-courses {
    margin-top:0;
  }

  .mobile-filter-button {
    background-color:#D9D9D9;
    color:#000000;
    padding: 4px 16px;
    margin-bottom:20px;
    cursor:pointer;
    display: inline-block;
  }

  @media (min-width:992px) {
    .catalog-item {
      margin-bottom:0;
    }
  }

  @media (min-width:1440px) {
    .np-catalog.np-main {
      padding: 0;
    }

    .np-catalog-header-wrapper {
      margin-bottom:50px;
    }
  }
</style>