{% assign omni = false %}
{% assign core = false %}
{% assign log_out = true %}

{% if current_person.signed_in? %}
  {% assign log_out = false %}
  {% for group in current_person.groups %}
    {% if group.name contains 'Core' %}
      {% assign core = true %}
      {% elsif group.name contains 'Omni' %}
        {% assign omni = true %}
    {% endif %}
  {% endfor %}
{% endif %}

{% if log_out %}
  <script>
    window.location.replace('https://academy.cin7.com/learners/sign_in');
  </script>
{% endif %}

{% include "header" %}
<div class="hero-homepage">
  <div class="np-max-width">
    <div class="hero-text">Learning Paths</div>
    <div class="hero-subheading">Explore curated learning paths tailored to your function and role.</div>
  </div>
</div>
<main class="np-main np-learning-paths np-subpage-container catalog-container np-max-width">
  {% comment %} <div class="filter-container">
    {% include 'filters_lp' %}
  </div> {% endcomment %}
  <div class="catalog-content-wrapper">
    <div class="np-learning-paths-main np-max-width">
      {% include "learning_paths_index", items: learning_paths.available %}
      </div>
  </div>
</main>
{% include "footer" %}

<style>
  .catalog-container {
  display: flex;
  gap: 20px;
  padding: 5% 20px;
}
.filter-container {
  width: 25%;
  margin: 10px;
}

.filters-container {
  width: 20%;
  border: 3px solid #002e6e;
  border-radius: 25px;
}
.catalog-courses-container {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .catalog-container {
    flex-direction: column;
    align-items: center;
  }
  .filter-container {
    width: 100%;
  }
  .catalog-content-wrapper {
    width: 100%;
  }
}

</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {

    const urlParams = new URLSearchParams(window.location.search);
    const categoriesFromURL = urlParams.getAll('category');
    if (categoriesFromURL.length === 0) {
        return; 
    }
    const cards = document.querySelectorAll('.lp-card');

    const cardMatchesCategories = (card, categories) => {
        const cardCategories = card.getAttribute('categories').split('[$]');
        return categories.every(category => cardCategories.includes(category));
    };

    const filterCards = () => {
        cards.forEach(card => {
            if (cardMatchesCategories(card, categoriesFromURL)) {
                card.style.display = 'block'; 
            } else {
                card.style.display = 'none'; 
            }
        });
    };

    filterCards();
});

</script>