{% assign log_out = true %}

{% if current_person.signed_in? %}
  {% assign log_out = false %}
{% 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 ">
  <div class="np-learning-paths-main np-max-width">
	{% if current_person.signed_in? %}
	  {% include "learning_paths_index", items: learning_paths.available %}
	{% else %}
	  <div class="hero-subheading"> You must be signed in to view Learning Paths. </div>
	{% endif %}
  </div>
</main>
{% include "footer" %}

<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>