{% assign available_courses = "" %}
{% for course in courses.enrolled %}
    {% assign available_courses = available_courses |  append: course.name | append: '[lang]' |  append: course.properties.course_language |  append: '$$'  %}
{% endfor %}
{% for course in courses.in_catalog %}
  {% assign available_courses = available_courses |  append: course.name | append: '[lang]' |  append: course.properties.course_language |  append: '$$' %}
{% endfor %}

{% include "header" %}
{% include 'banner_search_page' %}
<section class="homepage-courses-wrapper width-limit">
  <div class="courses-section-header">
    <div class="np-resource-subtitle">
      <h3 class="courses-title">
        <span class="lang-en">Search results for</span>
        <span class="lang-de">Suchergebnisse für</span>
        <span class="lang-es">Resultados de búsqueda para</span>
        <span class="lang-fr">Résultats de recherche pour</span>
        <span class="lang-br">Resultados da pesquisa para</span>
        <span style="color:#192435">"{{ results.term }}"</span>
      </h3>
    </div>
  </div>
  {% if results.items.any? %}
    <div class="courses-list row">
    {% render "search_result" for results.items as result %}
    </div>

    {% else %}
    {% include "search_zero_state" %}
  {% endif %}
</section>
{% include "footer" %}

<style>
    .homepage-courses-wrapper {
    padding-top: 20px;
    padding-bottom: 40px;
  }
    @media only screen and (min-width: 768px) {
    .homepage-courses-wrapper {
      padding-top: 40px;
      padding-bottom: 80px;
    }
  }
</style>

<script>
  function filterSearchResults() {
    const userSelectedLanguage = localStorage.getItem("academy-language");
    const search_result = document.querySelectorAll(".search-result"); 
    let available_courses = "{{ available_courses }}".toLowerCase().split("$$");
    let uniq_available_courses = [...new Set(available_courses)];

    console.log("Available courses:", uniq_available_courses);

    let courses = uniq_available_courses.map(item => {
      const parts = item.split("[lang]");
      return { name: parts[0].trim(), lang: parts[1] };
    })

    search_result.forEach((result) => {
      const result_name = result.querySelector(".result-name").innerText.toLowerCase();

      let is_visible = courses.some(course => course.name === result_name && course.lang === userSelectedLanguage);
      result.style.display = is_visible ? "block" : "none";
    });
  }

  addEventListener("DOMContentLoaded", (event) => {
    filterSearchResults();
  });
</script>