{% include "header" %}
{% include "catalog_popup_message" %}

{% include "sub_navigation" %}
<main class="np-main np-catalog np-subpage-container np-max-width">
  <div class="np-catalog-header-wrapper">
    <div class="np-catalog-header">
      <div class="np-resource-title">{{ catalog.headline }}</div>
      <div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
      {% include "catalog_filter_sidebar" %}
    </div>
    <div class="col-xs-12 col-sm-6 col-md-9">
      {% include "courses_catalog" %}
    </div>
  </div>
</main>
{% include "footer" %}

<style>
  @media (min-width: 768px) {
    .np-catalog-courses {
      margin-top: 0;
    }

    .catalog-course .np-card {
      padding-left: 12px;
      padding-right: 12px;
    }
  }
</style>

<script>
  window.addEventListener("DOMContentLoaded", function() {
    const categoryFilters = document.querySelectorAll(".filter-link")
    const courses = document.querySelectorAll(".catalog-course")

    document.querySelectorAll(".filter-link").forEach((filter) => {
      filter.addEventListener("click", (e) => {
        updateActiveCategory(e.target, categoryFilters)
        filterCourses()
      })
    })

    document.querySelectorAll(".filter-checkbox").forEach((checkbox) => {
      checkbox.addEventListener("change", () => {filterCourses()})
    })

    let params = new URLSearchParams(document.location.search);
    let categoryParam = params.get("category");

    if (categoryParam) {
      document.querySelector(`.filter-link[data-filter-name="${categoryParam}"]`).click()
    }
  })

  function updateActiveCategory(selectedFilter, categoryFilters) {
    categoryFilters.forEach((filter) => {filter.classList.remove("active")})
    selectedFilter.classList.add("active")
  }

  function filterCourses() {
    const selectedCategoryFilterID = document.querySelector(".filter-link.active").getAttribute("data-filter-id")

    let selectedDurationFilters = []
    let selectedDifficultyFilters = []
    const checkboxFilters = document.querySelectorAll(".filter-checkbox")

    checkboxFilters.forEach((checkbox) => {
      if (checkbox.checked) {
        if (checkbox.classList.contains("duration-filter")) {
          selectedDurationFilters.push(checkbox.getAttribute("data-filter-id-min"))
          selectedDurationFilters.push(checkbox.getAttribute("data-filter-id-max"))
        }
      }
    })

    // console.log(selectedCategoryFilterID)
    // console.log(selectedDurationFilters)

    const minDuration = Math.min( ...selectedDurationFilters )
    const maxDuration = Math.max( ...selectedDurationFilters )

    const courses = document.querySelectorAll(".catalog-course")

    courses.forEach((course) => {
      const courseCategories = course.getAttribute("data-categories")
      const courseDuration = course.getAttribute("data-duration")

      if 
        ((courseCategories.includes(selectedCategoryFilterID) || selectedCategoryFilterID == "all" ) && (!selectedDurationFilters.length || (courseDuration <= maxDuration && courseDuration >= minDuration))) {
        course.style.display = "flex"
      } else {
        course.style.display = "none"
      }     
    })

  }
</script>