<div class="catalog-filters">
  <div class="catalog-filter-dropdown-container">
    <button class="catalog-filter-dropdown np-button">All Courses</button>
    <div class="catalog-filter-dropdown-content">
      <span class="catalog-filter-item">All Courses</span>
      {% for category in categories.in_catalog %}
        <span class="catalog-filter-item">{{ category.name }}</span>
      {% endfor %}
    </div>
  </div>
</div>

<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    document.querySelectorAll(".catalog-filter-item").forEach((item) => {
      item.addEventListener("click", (clickEvent) => {
        filterCourses(clickEvent.target)
      })
    });
  });

  function filterCourses(category) {
    if (prepareCategoryName(category) == "all courses") {
      showAllCourses()
      changeFilterButtonName(category)
    } else {
      filterByCategory(category)
      changeFilterButtonName(category)
    }
  }

  function showAllCourses() {
    document.querySelectorAll(".course-card-container").forEach((item) => {
      item.parentNode.style.removeProperty('display');
    })
  }

  function filterByCategory(category) {
    document.querySelectorAll(".course-card-container").forEach((item) => {
      var categories = Array.from(item.querySelectorAll(".course-category")).map(courseCategory => prepareCategoryName(courseCategory));

      if (!categories.includes(prepareCategoryName(category))) {
        item.parentNode.style.display = "none";
      } else {
        item.parentNode.style.removeProperty('display');
      }
    })
  }

  function prepareCategoryName(category) {
    return category.innerHTML.trim().replace(/&nbsp;/g, '').toLowerCase()
  }

  function changeFilterButtonName(newName) {
    document.querySelector(".catalog-filter-dropdown").innerHTML = prepareButtonName(newName.innerHTML);
  }

  function prepareButtonName(buttonName) {
    var words = buttonName.split(" ");

    for (let i = 0; i < words.length; i++) {
      words[i] = words[i][0].toUpperCase() + words[i].substr(1);
    }

    return words.join(" ");
  }
</script>

<style>
  .catalog-filters {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 4%;
    color: #737373;
    font-weight: 600;
    letter-spacing: .56px;
    line-height: 1.71;
    transition: .2s;
  }
  
  .catalog-filter-dropdown-container {
    position: relative;
    display: inline-block;
  }

  .catalog-filter-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }

  .catalog-filter-item {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }

  .catalog-filter-item:hover {background-color: #f1f1f1}

  .catalog-filter-dropdown-container:hover .catalog-filter-dropdown-content {
    display: block;
  }
  
  @media (min-width: 768px) {
    .catalog-filters {
      flex-direction: row;
      justify-content: left;
    }
  }
</style>