{% include "side_navigation_bar" %}

<div class="section-margin mandatory-courses-carousel" style="margin-bottom:75px;">
  <div class="grid">
    <div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
      <h2 class="text-dark-blue sainte-colombe-medium heading--1 color-indigo-dark hunt-padding-b">
        Mandatory Courses</h2>
    </div>
    <p class="carousel-change-mandatory show-more">See More</p>
  </div>
  <div class="grid grid--equal-height slider1 mandatory-carousel">
    {%- for course in my_content.courses -%}

      {% if course.course_category_names contains "Mandatory Courses" %}
        {% include 'course' %}
      {%- endif -%}
    {%- endfor -%}
  </div>
  <div class="grid no-mandatory-courses" style="display:none">
    No assigned courses
  </div>
</div>

<style>
  .no-mandatory-courses {
    font-size: 20px;
    margin-left: 20px;
    margin-top: 16px;
  }
</style>

  
<script type="text/javascript">
  $(document).ready(function () {

    $('.mandatory-carousel').on('init', function(event, slick){
      if (slick.slideCount == 0) {
        $(".mandatory-carousel").hide()
        $(".carousel-change-mandatory").hide()
        $(".no-mandatory-courses").show()
      }
    });

    $('.mandatory-carousel').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: true,
        infinite: true,
        cssEase: 'linear',
        responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    })
  });
  
</script>
<script>
  $('.carousel-change-mandatory').click(function() {
    if($('.carousel-change-mandatory').hasClass('show-more')) {
      $('.slider1').slick('unslick');
      $('.show-more').text('Show Less');
      $('.show-more').addClass('show-less');
      $('.show-more').removeClass('show-more');
    } else if($('.carousel-change-mandatory').hasClass('show-less')) {
      $('.show-less').text('Show More');
      $('.show-less').addClass('show-more');
      $('.show-less').removeClass('show-less');
      $('.slider1').slick({
          slidesToShow: 3,
          slidesToScroll: 1,
          dots: true,
          infinite: true,
          cssEase: 'linear',
          responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
              infinite: true,
              dots: true
            }
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
        ]
      });
    }
  });
</script>