<style>
  .course-carousel-container .catalog-card:not(:first-child) {
    display: none;
  }
  .course-carousel-container .catalog-card {
    visibility: hidden;
  }
</style>


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

{% if items.any? %}
  <div class="course-carousel-container">
    {% for course in items %}
      {% if filterInProgress %}
        {% if course.progress > 0 and course.progress < 100 %}
          {% include "cards_course" with course %}
          {% assign displayedCount = displayedCount | plus: 1 %}
        {% endif %}
      {% else %}
        {% include "cards_course" with course
          , hiddenByDefault: false %}
        {% assign displayedCount = displayedCount | plus: 1 %}
      {% endif %}
    {% endfor %}
  </div>
  {% if displayedCount == 0 %}
    {% include "courses_zero_state"
      , message: 'Nothing found! Start some lessons to fill this gap.'
      , messageEs: '¡Nada encontrado! Comienza algunas lecciones 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 coursesCarousel = $('.course-carousel-container');

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

  {% if sortByPriority %}      

  cards.sort(function(a, b) {
  const aPriority = extractPriority(a);
  const bPriority = extractPriority(b);
  return bPriority - aPriority;
  });

  // Re-append sorted cards to container
  $.each(cards, function(index, card) {
  coursesCarousel.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;
  }

  coursesCarousel.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');
  }

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

  function extractPriority(element){
    const priority = $(element).attr('priority');
    return priority ? Number(priority) : 0;
  }
</script>

<style>
  @media (max-width: {{breakpoint}}px) {
    .course-carousel-container .catalog-card {
      margin: 0 10px 32px;
    }
  }
</style>