{% assign uniq_courses = '' %}
{% assign course_counter = 0 %}
{% assign learner_region = current_person.properties.person_locale %}


{% if courses.enrolled.any? %}
  <div class="np-catalog-courses row row-with-thumbnails">
    {% for course in courses.enrolled %}
      {% for category in course.categories %}
        {% unless category.name == 'Blog' %}
          {% unless uniq_courses contains course.name %}
              {% if course.properties.course_locale == learner_region %}
                <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
                  {% include "cards_course" with course %}
                </div>
              {% assign uniq_courses = uniq_courses |  append: course.name %}
              {% assign course_counter = course_counter |  plus: 1 %}
              {% endif %}
          {% endunless %}
        {% endunless %}
      {% endfor %}
    {% endfor %}
  </div>

  {% if course_counter == 0 %}
    {% capture message %}
      {% t shared.zero_state.courses.catalog,
        key: current_school.course_vocabulary
      %}
    {% endcapture %}
    {% include "grow-with-walmart-zero-state", message: message %}
  {% endif %}
{% endif %}


<script>
document.addEventListener("DOMContentLoaded", () => {
  const urlParams = new URLSearchParams(window.location.search);
  const searchParam = urlParams.get("search");
  const selectedCategories = searchParam
    ? searchParam.split(",").map(c => c.trim()).filter(Boolean)
    : [];

  const courseCards = document.querySelectorAll(".card-course");
  const checkboxes = document.querySelectorAll('#category-checkboxes input[type="checkbox"]');

  if (selectedCategories.length > 0) {
    checkboxes.forEach(checkbox => {
      if (selectedCategories.includes(checkbox.value)) {
        checkbox.checked = true;
      }
    });

    courseCards.forEach(card => {
      const cardCategories = card.getAttribute("categories") || "";
      const hasMatch = selectedCategories.some(cat => cardCategories.includes(cat));
      card.parentElement.style.display = hasMatch ? "" : "none";
    });
  }

  renderActiveFilters(selectedCategories);

  const filterForm = document.getElementById("filter-form");
  filterForm.addEventListener("submit", event => {
    event.preventDefault();

    const selected = Array.from(checkboxes)
      .filter(cb => cb.checked)
      .map(cb => cb.value);

    const newParams = new URLSearchParams(window.location.search);
    if (selected.length > 0) {
      newParams.set("search", selected.join(","));
    } else {
      newParams.delete("search");
    }

    window.location.search = newParams.toString();
  });

  const dropdownBtn = document.querySelector(".custom-dropdown-button");
  const dropdownPanel = document.querySelector(".custom-dropdown-panel");

  if (dropdownBtn && dropdownPanel) {
    dropdownBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      dropdownPanel.classList.toggle("is-open");
    });

    document.addEventListener("click", (e) => {
      if (!dropdownPanel.contains(e.target) && !dropdownBtn.contains(e.target)) {
        dropdownPanel.classList.remove("is-open");
      }
    });
  }

  function renderActiveFilters(selected) {
    const container = document.getElementById("active-filters");
    if (!container) return;

    container.innerHTML = "";

    if (selected.length === 0) return;

    selected.forEach(cat => {
      const tag = document.createElement("span");
      tag.className = "filter-tag";
      tag.innerHTML = `
        ${cat}
        <button type="button" data-remove="${cat}">×</button>
      `;
      container.appendChild(tag);
    });

    container.querySelectorAll("button[data-remove]").forEach(btn => {
      btn.addEventListener("click", () => {
        const toRemove = btn.getAttribute("data-remove");
        const newSelection = selected.filter(c => c !== toRemove);

        const newParams = new URLSearchParams(window.location.search);
        if (newSelection.length > 0) {
          newParams.set("search", newSelection.join(","));
        } else {
          newParams.delete("search");
        }

        window.location.search = newParams.toString();
      });
    });
  }
});
</script>


