
<div class="np-learning-paths-resources custom-lp-index">
  {% if items.any? %}
    {% for learning_path in items %}
      {% for category in learning_path.categories %}
        {% if category.name == '{{cat}}' %} 
            {% include "cards_learning_path" with learning_path %}
        {% endif %}
      {% endfor %}
    {% endfor %}
  {% else %}
    <div class="np-learning-paths-resources-container">
      <div class="np-zero-state-text">
        No tienes asignadas rutas de aprendizaje.
      </div>
      <img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
    </div>
  {% endif %}
</div>


<script>
  function sortGrowLps() {
    const lpCards = Array.from(document.querySelectorAll('.lp-card'));

    lpCards.sort((a, b) => {
      const aPrioritise = a.getAttribute('prioritise') === 'true';
      const bPrioritise = b.getAttribute('prioritise') === 'true';
      
      return bPrioritise - aPrioritise;
    });


    const parentElement = lpCards[0].parentNode;


    while (parentElement.firstChild) {
      parentElement.removeChild(parentElement.firstChild);
    }


    lpCards.forEach(card => parentElement.appendChild(card));
  }
  document.addEventListener("DOMContentLoaded", () => {
    sortGrowLps();
  });
</script>