{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<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-overlay"></div>
    <div class="np-homepage-hero-content">
      <div class="np-homepage-headline">
        {{ homepage.headline }}
      </div>
      <div class="np-homepage-subheadline">
        {{ homepage.subheadline }}
      </div>
      <a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
        {% t .discover %}
      </a>
    </div>
  </div>
  {% include "search_bar" %}
  <div class="np-homepage-featured np-max-width">
    <div class="np-homepage-featured-text">
      <div class="np-homepage-headline">
        {{ homepage.featured_courses_headline }}
      </div>
      <div class="np-homepage-subheadline">
        {{ homepage.featured_courses_subheadline }}
      </div>
    </div>
    {% if courses.featured.any? %}
      <div class="np-homepage-featured-courses row">
        {% for course in courses.featured %}
          <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
            {% include "cards_course" with course %}
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="np-homepage-featured-empty">
        <div class="np-zero-state-text">
          {% t .empty, key: current_school.course_vocabulary %}
        </div>
        <img
          class="np-zero-state-courses"
          alt="{% t .empty, key: current_school.course_vocabulary %}"
        />
      </div>
    {% endif %}
  </div>

  {% include "popular_topics" %}

  {% include "catalog_category_carousels" %}

</main>
{% include "footer" %}

<style>
  .np-homepage-hero-overlay {
   /* background: rgb(18,102,102);
    background: linear-gradient(43deg, rgba(18,102,102,1) 0%, rgba(12,170,65,1) 100%); */
    background: #00A264;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 85%;
  }

  .np-homepage-headline,
  .np-homepage-subheadline {
    color: #fafafa;
  }

  .np-homepage-headline {
    font-weight: 900;
  }

  .np-homepage-hero-cta {
    color: #126666;
    padding: 8px 1pc;
    margin-top: 36px;
    background-color:#fff;
  }

  .np-homepage-hero-cta:hover {
    background-color:rgba(255, 255, 255, 0.8);
  }

  @media (min-width:768px) {
    .np-homepage-headline {
      font-size: 52px;
      line-height: 60px;
    }
  }

</style>

<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")
    }
  });

  $(".topics-btn").click(function() {
    const selectedFilter = $(this).data("filter")
    $(".topics-btn").removeClass("active")
    $(this).addClass("active")

    $(".category-section").hide()

    $(".category-section").each(function() {
      if (selectedFilter == $(this).data("filter")) {
        $(this).show()
      }
    })
  })
</script>