{% include "header" %}

<main class="np-main np-homepage">
  <div class="np-homepage-hero">
    <img class="np-homepage-hero-image"
      src="{{ homepage.artwork_url }}"
      alt="{{ homepage.headline }}"
    />
    
    <div class="np-homepage-hero-content">
      <div class="np-homepage-headline np-header-font-color" style="color:#fff">
        {{ homepage.headline }}
      </div>
      <div class="np-homepage-subheadline np-header-font-color" style="color:#fff">
        {{ homepage.subheadline }}
      </div>
      {% comment %} <a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
        Explore Courses
      </a> {% endcomment %}
    </div>
  </div>
  {% comment %} {% include "sub_navigation" %} {% endcomment %}
  <div class="np-course-library np-max-width">
  {% comment %} <h2 class="library-title">Course Library</h2> {% endcomment %}
    {% if current_school.filterable_categories.any? %}
      {% assign categories_by_name = current_school.filterable_categories %}
      {% assign carousel_count = 1 %}
      {% for category in categories_by_name %}
        {% assign carousel_count = carousel_count | plus: 1 %}
        {% assign courses_per_carousel = 0 %}

        {% assign category_name_split = category.name | split: " " %}
        {% assign category_name_joined = category_name_split | join: "-" | downcase %}

        <div class="category-section" data-carousel="{{carousel_count}}" style="display:none;" id="{{ category_name_joined }}">
          <div class="carousel-header-wrapper">
            <h3 class="carousel-header">{{category.name}}</h3>
            <a href="#" class="show-more" data-toggle-carousel="{{carousel_count}}" data-carousel-state="initialized">Show More</a>
          </div>

          {% assign catalog_courses = courses.in_catalog %}
          {% if catalog_courses.any? %}
              {% for course in catalog_courses %}           
                {% for course_category in course.categories %}
                    {% if category.name != "Videos" %}
                      {% if category.name == course_category.name %}
                        {% assign courses_per_carousel = courses_per_carousel | plus: 1 %}
                      {% endif %}
                    {% endif %}
                {% endfor %}
              {% endfor %}
          {% endif %}
          
          {% include "courses_carousel", category: category.name, num_of_slides: courses_per_carousel %}
        </div>
      {% endfor %}
    {% endif %}
  </div>
     {% include "faq" %}
</main>
{% include "footer" %}

<script>
  $(document).ready(function() {
    $(".category-section").each(function() {
      let carousel = $(this).find(".category-carousel")
      let carouselSize = $(carousel).attr("data-slider-size")

      carousel.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
        if(!slick.$dots){ return; }

        (slick.$dots[0].children.length > 1) ? null : hideDotsAndShowMore()

        function hideDotsAndShowMore() {
          slick.$dots[0].classList.add("np-hidden")
          carousel.closest(".category-section").find(".show-more").addClass("np-hidden")
        }
      });

      if (carouselSize > 0) {
        initSlickCarousel(carousel)
        $(this).css("display", "block")
        setTimeout(() => { $(this).css("opacity", "1") }, 300)
      }

    })
  })

  function initSlickCarousel(carousel) {
    $(carousel).slick({
      slidesToShow: 3,
      slidesToScroll: 3,
      cssEase: 'linear',
      prevArrow: '<i class="fal fa-chevron-left"></i>',
      nextArrow: '<i class="fal fa-chevron-right"></i>',
      infinite: false,
      dots: true,
      arrows: true,
      responsive: [
        {
          breakpoint: 1170,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
            arrows: true,
            dots: true,
          }
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
            dots: true,
            arrows: false,
          }
        }
      ]
    });  
  }

$('.show-more').click(function(e) {
   e.preventDefault();

   let currentCarousel = $(this).closest(".category-section").find(".category-carousel");

   if ($(this).attr("data-carousel-state") == "initialized") {
     $(this).text("Show Less")
     currentCarousel.slick('unslick');
     $(this).attr("data-carousel-state", "destroyed")
   } else if ($(this).attr("data-carousel-state") == "destroyed" ) {
     $(this).text("Show More")
     initSlickCarousel(currentCarousel);
     $(this).attr("data-carousel-state", "initialized")
   }
});

</script>