{% assign filterInProgress = filterInProgress | default: false %}
{% assign sortByPriority = sortByPriority | default: false %}
{% assign displayedCount = 0 %}

{% if items.any? %}
  <div class="paths-carousel-container">
    {% for learning_path in items %}
      {% if filterInProgress %}
        {% if learning_path.progress > 0 and learning_path.progress < 100 %}
          {% include "cards_learning_path_custom" with learning_path %}
          {% assign displayedCount = displayedCount | plus: 1 %}
        {% endif %}
      {% else %}
        {% include "cards_learning_path_custom" with learning_path %}
        {% assign displayedCount = displayedCount | plus: 1 %}
      {% endif %}
    {% endfor %}
  </div>
  {% if displayedCount == 0 %}
    {% include "courses_zero_state"
      , message: 'Nothing found! Start some paths to fill this gap.'
      , messageEs: '¡Nada encontrado! Comienza algunas rutas para llenar este vacío.' %}
  {% endif %}
{% else %}
  {% capture message %}
    {% t shared.zero_state.courses.index,
      key: current_school.course_vocabulary
    %}
  {% endcapture %}
  {% include "courses_zero_state"
    , message: message %}
{% endif %}

<script>
     const pathsCarousel = $('.paths-carousel-container');

  $(document).ready(function(){
    const maxItems = 5;
    const cards = pathsCarousel.find('.np-card').get();

    {% if sortByPriority %}      
      
      cards.sort(function(a, b) {
        const aPriority = extractPriorityFromCategories(a);
        const bPriority = extractPriorityFromCategories(b);
        return bPriority - aPriority;
      });
      
      // Re-append sorted cards to container
      $.each(cards, function(index, card) {
        pathsCarousel.append(card);
      });

    {% endif %}
    
    for(let i = 5; i < cards.length; i++) {
      cards[i].remove();
    }
    let initialSlide = 0;
    // Go to 2nd slide if width is higher than breakpoint
    if ($(window).width() > {{breakpoint}}) {
      initialSlide = 1;
    }
    pathsCarousel.slick({
      centerMode: true,
      dots: false,
      infinite: false,
      speed: 300,
      slidesToShow: 2,
      slidesToScroll: 1,
      initialSlide: initialSlide,
      responsive: [
        {
          breakpoint: {{breakpoint}},
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });

    for (let i = 0; i < 5; i++) {
        cards[i].classList.add('card-visible');
    }
  });

  

  function extractPriorityFromCategories(element){
    const categories = $(element).attr('categories');
    const priorityIndex = categories.indexOf('[priority]');
    if (priorityIndex !== -1) {
      const categoriesAfterPriority = categories.substring(priorityIndex);
      return Number(categoriesAfterPriority.substring(10, categoriesAfterPriority.indexOf(',')))
    }
    return 0;
  }

  // Redirect to slide 1 if user slides to slide 0 above breakpoint
  setInterval(function() {
    if ($(window).width() > {{breakpoint}}) {
      const currentSlide = pathsCarousel.slick('slickCurrentSlide');
      if (currentSlide === 0) {
        console.log('redirecting from slide 0 to slide 1');
        pathsCarousel.slick('slickGoTo', 1);
      }
    }
  }, 100);
</script>

<style>

  .paths-carousel-container .np-card:not(:first-child) {
    display: none;
  }
  .paths-carousel-container .np-card {
    visibility: hidden;
  }
  @media (max-width: {{breakpoint}}px) {
    .paths-carousel-container .np-card {
      margin: 0 10px 32px;
    }
  }
</style>