<!-- NOT USED FOR NOW -->
{% assign number_of_featured_courses_of_current_user = 0 %}
{% for course in my_content.courses %}
  {% if current_person.properties.featured contains course.id %}
    {% assign number_of_featured_courses_of_current_user = number_of_featured_courses_of_current_user | plus: 1 %}
  {% endif %}
{% endfor %}

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>

{% include "side_navigation_bar" %}

<a id="back-to-top-button"></a>

<div class="section-margin">
  {% comment %} Hero {% endcomment %}
  <section id="Main" class="section" style="padding-top: 0; padding-bottom: 33px;"> 
    <div class="section-heading hunt-hero-header" style="margin-top: 1em; margin-bottom: 2em;">
      <h1 class="text-dark-blue sainte-colombe-regular section-heading__heading heading--1 decorative-font hunt-margin-t" style="font-size: 60px;">
        Elevate Your Knowledge
      </h1>
      <p class="text-grey euclid-circular-regular section-heading__subhead heading--3 hero__subhead">
        Curated Courses Inspired By Our Agents To Help Grow Your Business
      </p>
    </div>
    <div class="homepage-images-container">
      <div>
        <img class="homepage-image" src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/DouglasElliman/BFA_27163_3360923_RT+(2).jpg"  style="filter: contrast(80%);">
      </div>
      <div>
        <img class="homepage-image" src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/DouglasElliman/0B2V0376-1024x683.jpeg">
      </div>
      <div>
        <img class="homepage-image" src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/DouglasElliman/BFA_27177_3362525.jpeg">
      </div>
    </div>
  </section> 

  {% comment %} Courses {% endcomment %}
  <section id="Courses" class="section background-white section--padding-top-only"  style="padding-top: 0;">
    {% include 'my_content_header' %}
    {%- assign courses = my_content.courses -%}
    <div id="categories" class="grid">
      <div class="grid__item grid__item--tablet-up-half hunt-margin-b" style="width: 100%;">
        <h2 class="text-dark-blue euclid-circular-bold heading--1 color-indigo-dark" style="margin-bottom: 0;">My Courses</h2>
      </div>
    </div>
  {% comment %} Recommendations {% endcomment %}
  {% if number_of_featured_courses_of_current_user > 0 %}
  <div id="recommendations" class="section background-white section--padding-top-only"  style="padding-top: 0;">
    <!-- Featured -->
    <div class="single-carousel">
      <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 euclid-circular-light heading--1 color-indigo-dark hunt-padding-b">
            Featured Courses</h2>
        </div>
        <p class="euclid-circular-regular carousel-change1 show-more">See More</p>
      </div>

      <div class="grid grid--equal-height slider1 test-carousel">
        {%- for course in courses -%}
          {% if current_person.properties.featured contains course.id %}
            {% include 'course' %}
          {%- endif -%}
        {%- endfor -%}
      </div>
    </div>
    <!-- Featured -->
    </div>
  {% endif %}

    <!-- All Enrolled Courses -->
    <div class="single-carousel">
      <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 euclid-circular-light heading--1 color-indigo-dark hunt-padding-b">
            All Enrolled Courses</h2>
        </div>
        <p class="euclid-circular-regular carousel-change3 show-more">See More</p>
      </div>
  
      <div class="grid grid--equal-height slider3">
        {%- for course in courses -%}
          {% include 'course' %}
        {%- endfor -%}
      </div>
      <p class="text-grey euclid-circular-light text-major text-grey" style="margin-bottom: 30px; font-size: 20px; margin-top: 2px; padding-left: 100px;">
        Click <b><a href="/catalog" class="euclid-circular-regular click-here">here</a></b> to access the full course catalog.
      </p>
    </div>
  <!-- All Enrolled Courses -->


  <!-- DE Tools & Technology -->
  <div class="single-carousel">
    <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 euclid-circular-light heading--1 color-indigo-dark hunt-padding-b">
          DE Tools & Technology</h2>
      </div>
      <p class="euclid-circular-regular carousel-change2 show-more">See More</p>
    </div>

    <div class="grid grid--equal-height slider2 test-carousel">
      {%- for course in courses -%}
        {% if course.course_category_names == "DE Tools & Technology" %}
          {% include 'course' %}
        {%- endif -%}
      {%- endfor -%}
    </div>
  </div>
    <!-- DE Tools & Technology --> 
  </section>
</div>

<!-- 
<section id="resources" class="section-margin">
  <div class="templates-header hunt-margin-b" style="margin-top: 100px;">
    <div class="grid">
      <div class="grid__item grid__item--tablet-up-third grid__item--desktop-up-5" style="background: white; width: 100% !important;">
        <h2 class="text-dark-blue sainte-colombe-medium heading--1 color-indigo-dark hunt-margin-b">Quick Links & Resources</h2>
      </div>
    </div>
  </div>

  <div class="grid">
    <div class="grid__item">
    <span class="euclid-circular-regular" style="font-size: 20px;">Filter: </span>
    <select id="elliman-dropdown">
      <option value="c-all">All</option>
    </select>
    </div>
  </div> 

</section> -->

<style>
  * {box-sizing: border-box;}
  body {font-family: Verdana, sans-serif;}
  .mySlides {display: none;}
  img {vertical-align: middle;}
  
  /* Slideshow container */
  .slideshow-container {
    width: 100%;
    position: relative;
  }

  .homepage-images-container {
    justify-content: center; 
    display: -webkit-flex;
    display: flex;
  }

  .homepage-image {
    max-height: 220px; 
    object-fit: cover;
  }
  
  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }
  
  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  
  /* The dots/bullets/indicators */
  .dot {
    height: 5.3px;
    width: 5.3px;
    margin: 0 2px;
    background-color: #c7c7c7;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active {
    background-color: #009CBD;
  }
  
  /* Fading animation */
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  
  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
  }
  </style>

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


<script>
  var slideIndex = 0;
  showSlides();
  
  function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 5000); // Change image every 2 seconds
  }
  </script>

<script>
  var btn = $('#back-to-top-button');

  $(window).scroll(function() {
    if ($(window).scrollTop() > 300) {
      btn.addClass('show');
    } else {
      btn.removeClass('show');
    }
  });

  btn.on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({scrollTop:0}, '300');
  });
</script>

<script type="text/javascript">

</script>
<script>
$('.carousel-change1').click(function() {

    if($('.carousel-change1').hasClass('show-more')) {
      $('.slider1').slick('unslick');
      $('.show-more').text('Show Less');
      $('.show-more').addClass('show-less');
      $('.show-more').removeClass('show-more');
    } else if($('.carousel-change1').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>
<script>
$('.carousel-change2').click(function() {

    if($('.carousel-change2').hasClass('show-more')) {
      $('.slider2').slick('unslick');
      $('.show-more').text('Show Less');
      $('.show-more').addClass('show-less');
      $('.show-more').removeClass('show-more');
    } else if($('.carousel-change2').hasClass('show-less')) {
      $('.show-less').text('Show More');
      $('.show-less').addClass('show-more');
      $('.show-less').removeClass('show-less');
      $('.slider2').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-change3').click(function() {
  
      if($('.carousel-change3').hasClass('show-more')) {
        $('.slider3').slick('unslick');
        $('.show-more').text('Show Less');
        $('.show-more').addClass('show-less');
        $('.show-more').removeClass('show-more');
      } else if($('.carousel-change3').hasClass('show-less')) {
        $('.show-less').text('Show More');
        $('.show-less').addClass('show-more');
        $('.show-less').removeClass('show-less');
        $('.slider3').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>
  function orderSlides() {
  $(".slider3 .course-details__item").each(function() {
    var currentSlideDataOrder = $(this).attr("data-order")
    var firstSlideDataOrder = $(".course-details__item").first().attr("data-order")
    if (currentSlideDataOrder > firstSlideDataOrder) {
        $($(this)).prependTo(".slider3")
    }
  })
}

$(document).ready(function () {
$('.test-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
      }
    }
  ]
})

orderSlides()
initializeCarousel()
});



function initializeCarousel() {
  $('.slider3').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>