{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
<div class="np-homepage-hero">
  <div class="np-homepage-hero-image">
  </div>
  <div class="np-homepage-hero-content">
    <div class="np-homepage-headline np-header-font-color">
        Video Tutorials
    </div>
    <div class="np-homepage-subheadline np-header-font-color">
        Beginner to advanced level training for the Camera IQ project editor
    </div>
  </div>
</div>
{% include "sub_navigation" %}
<div class='video-carousel'>
    <div class='video-carousel-title'>
        Getting Started
    </div>
    <div class='video-carousel-carousel-1'>
        {% for course in courses.in_catalog %}
            <div class='col-xs-12 col-md-6 col-lg-4 np-stretch-content'>
                {% include "cards_course" with course %}
            </div>
        {% endfor %}
    </div>
</div>
<div class='video-carousel'>
    <div class='video-carousel-title'>
        Fundamentals
    </div>
    <div class='video-carousel-carousel-2'>
        {% for course in courses.in_catalog %}
            <div class='col-xs-12 col-md-6 col-lg-4 np-stretch-content'>
                {% include "cards_course" with course %}
            </div>
        {% endfor %}
    </div>
</div>
<div class='video-carousel'>
    <div class='video-carousel-title'>
        Creative Exploration
    </div>
    <div class='video-carousel-carousel-3'>
        {% for course in courses.in_catalog %}
            <div class='col-xs-12 col-md-6 col-lg-4 np-stretch-content'>
                {% include "cards_course" with course %}
            </div>
        {% endfor %}
    </div>
</div>
{% include "footer" %}
<style>
    .video-carousel {
        max-width: 85%;
        margin: auto;
        margin-top: 70px;
    }
    .video-carousel-title {
        font-size: 26px;
        padding: 15px 0;
    }
    .slick-slider {
        display: flex;
    }
    .slick-arrow {
        background: none;
        border: none;
        color: white;
        font-size: 82px;
        font-weight: 100;
        position: relative;
        cursor: pointer;
    }
    .slick-prev {
        left: -20px;
    }
    .slick-next {
        right: -20px;
    }
    .np-card-content-description {
    height: 100px;
  }
  .np-card-content-title {
    height: 85px;
    overflow: clip;
  }
</style>

<script>
    $(".np-sub-navigation-content-item:contains('Videos')").addClass('np-sub-navigation-content-item-active')
    $(".video-carousel-carousel-1").slick({
        prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
        nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>',
        infinite: false,
        slidesToShow: 3,
    })
    $(".video-carousel-carousel-2").slick({
        prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
        nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>',
        infinite: false,
        slidesToShow: 3,
    })
    $(".video-carousel-carousel-3").slick({
        prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
        nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>',
        infinite: false,
        slidesToShow: 3,
    })
    window.onload = function() {
        [].slice.call(document.getElementsByClassName("np-card-content-description")).forEach(function(element) {
        if(element.innerText.length > 150){
            element.innerText = element.innerText.slice(0,150) + '...'
        }
        });
    }
</script>