
<!-- 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"/>

<section id="Courses" class="section background-white section--padding-top-only"  style="padding-top: 0;">
  {% include 'my_content_header' %}
  {%- assign courses = my_content.courses -%}

  {% if isRandRealty %}
    {%
      include 'course_category',
      category_name: "Howard Hanna | Rand Realty",
      iterator: "27",
      category_id: "HowardHannaVerticalLineRandRealty"
    %}

    {%
      include 'course_category',
      category_name: "HH|RR New Agent",
      iterator: "28",
      category_id: "HHRRNewAgent"
    %}

    {%
      include 'course_category',
      category_name: "HH|RR Agent Support",
      iterator: "29",
      category_id: "HHRRAgentSupport"
    %}

    {%
      include 'course_category',
      category_name: "HH|RR Manager",
      iterator: "30",
      category_id: "HHRRManager"
    %}

    {%
      include 'course_category',
      category_name: "HH|RR Hanna Rand Advantage",
      iterator: "36",
      category_id: "HHRRAdvantage"
    %}

    {%
      include 'course_category',
      category_name: "HH|RR Coaching & Mastermind",
      iterator: "35",
      category_id: "HHRRCoachingMastermind"
    %}

    {%
      include 'course_category',
      category_name: "HH|RR CORE Companion",
      iterator: "31",
      category_id: "HHRRCORECompanion"
    %}

    {%
      include 'course_category',
      category_name: "HH|RR Certification",
      iterator: "37",
      category_id: "HHRRCertification"
    %}

    {%
      include 'course_category',
      category_name: "HH|RR Marketing Your Business",
      iterator: "34",
      category_id: "HHRRMarketingYourBusiness"
    %}

    {%
      include 'course_category',
      category_name: "HH|RR Sales Skills",
      iterator: "32",
      category_id: "HHRRSalesSkills"
    %}

    {%
      include 'course_category',
      category_name: "HH|RR Tech Toolbox",
      iterator: "38",
      category_id: "HHRRTechToolbox"
    %}

    <style>
      .course-button {
        color: #ffffff;
        background-color: #004538 !important;
      }

      .course-button:hover {
        background-color: #ffffff;
        color: #004538 !important;
      }
    </style>
  {% endif %}

  {% if isHowardHanna %}
    {%
      include 'course_category',
      category_name: "Agent Fundamentals for the Newly Licensed",
      iterator: "1",
      category_id: "AgentFundamentalsForTheNewlyLicensed"
    %}

    {%
      include 'course_category',
      category_name: "Career Development: Sales, Planning & More",
      iterator: "2",
      category_id: "CareerDevelopmentSalesPlanningAndMore"
    %}

    {%
      include 'course_category',
      category_name: "Hanna Advantage & Value Proposition",
      iterator: "3",
      category_id: "HannaAdvantageAndValueProposition"
    %}

    <!-- Howard Hanna Management  -->
    {% if current_person.properties.access_level == 'region-admin' or
          current_person.properties.access_level == 'office-owner' or
          current_person.properties.access_level == 'Global Admin in Moxiworks' or
          current_person.properties.access_level == 'Regional Manager' or
          current_person.properties.access_level == 'Sales Office Manager' or
          current_person.properties.access_level == 'Corporate Manager' or
          current_person.properties.access_level == 'manager'
    %}
      {%
        include 'course_category',
        category_name: "Howard Hanna Management",
        iterator: "4",
        category_id: "HowardHannaManagement"
      %}
    {% endif %}
    <!-- Howard Hanna Management -->

    {%
      include 'course_category',
      category_name: "H-Suite Tech Tools",
      iterator: "5",
      category_id: "HSuiteTechTools"
    %}
    
    {%
      include 'course_category',
      category_name: "Marketing Skills and Strategies",
      iterator: "6",
      category_id: "MarketingSkillsAndStrategies"
    %}

    {%
      include 'course_category',
      category_name: "Support Staff Development",
      iterator: "7",
      category_id: "SupportStaffDevelopment"
    %}

    {%
      include 'course_category',
      category_name: "Technical Support",
      iterator: "8",
      category_id: "TechnicalSupport"
    %}
  {% elsif isAllenTate %}
    {%
      include 'course_category',
      category_name: "Allen Tate Certifications",
      iterator: "14",
      category_id: "AllenTateCertifications"
    %}

    {%
      include 'course_category',
      category_name: "Allen Tate Advantage",
      iterator: "15",
      category_id: "AllenTateAdvantage"
    %}

    {%
      include 'course_category',
      category_name: "Lead Generation",
      iterator: "16",
      category_id: "LeadGeneration"
    %}

    {%
      include 'course_category',
      category_name: "Most Recent Tate Webinars",
      iterator: "26",
      category_id: "MostRecentTateWebinars"
    %}

    {%
      include 'course_category',
      category_name: "Marketing Skills and Strategies",
      iterator: "17",
      category_id: "MarketingSkillsandStrategies"
    %}

    {%
      include 'course_category',
      category_name: "Business Generation Suite",
      iterator: "18",
      category_id: "BusinessGenerationSuite"
    %}

    {%
      include 'course_category',
      category_name: "Working with Buyers",
      iterator: "19",
      category_id: "WorkingwithBuyers"
    %}

    {%
      include 'course_category',
      category_name: "Working with Sellers",
      iterator: "20",
      category_id: "WorkingwithSellers"
    %}

    {%
      include 'course_category',
      category_name: "Luxury Homes",
      iterator: "21",
      category_id: "LuxuryHomes"
    %}

    {%
      include 'course_category',
      category_name: "Family of Companies & Our Partners",
      iterator: "22",
      category_id: "FamilyofCompanies"
    %}

    {%
      include 'course_category',
      category_name: "Health & Wellness",
      iterator: "23",
      category_id: "Health"
    %}

    {%
      include 'course_category',
      category_name: "Allen Tate Leadership",
      iterator: "24",
      category_id: "AllenTateLeadership"
    %}

    {%
      include 'course_category',
      category_name: "Real Estate Essentials",
      iterator: "11",
      category_id: "RealEstateEssentials"
    %}

    {%
      include 'course_category',
      category_name: "Staff Development",
      iterator: "25",
      category_id: "Staff Development"
    %}
  {% endif %}
</section>

<style>
  .course-button {
    color: #ffffff;
    background-color: #0c643a;
  }

  .course-button:hover {
    background-color: #ffffff;
    color: #0c643a;
  }

  ._left:before, ._right:before {
    font-size:30px;
    background: black;
    color: white;
    border-radius: 50%;
    font-style: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: Font Awesome\ 5 Pro;
    font-weight: 900;
    margin-bottom: 0;
    -webkit-font-smoothing: antialiased;
  }

  p[class*="carousel-change"] {
    float: right;
    padding: 18px;
    color:#0061df;
    font-size:16px;
  }

  .slick-dots {
    bottom: 50px;
    width: 90%;
  }

  ._left, ._right {
    top: 17.5%;
    z-index: 1000;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    touch-action: manipulation;
    margin: 0;
    border-radius: 0;
    font-weight: inherit;
    letter-spacing: 0.01em !important;
    line-height: 0;
    position: absolute;
    width: 30px;
    height: 30px;
    padding: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    right: 30%;
    display: block;
  }

  ._right {
    right:5%;
  }

  ._left {
    left: 5%;
  }

  .uk-panel-badge {
      right: 18px !important;
  }

  @media only screen and (max-width: 1024px) {
    ._right {
      right:4.5%;
      top: 18.5%;
    }
    ._left {
      left: 4.5%;
      top: 18.5%;
    }
    .uk-panel-badge {
        right: 10px !important;
    }
  }

  @media only screen and (max-width: 600px) {
    ._right {
      right:3%;
      top: 19%;
    }
    ._left {
      left: 3%;
      top: 19%;
    }
    .uk-panel-badge {
        right: 4px !important;
    }
  }

  ._1ycOA {
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    --polaris-version-number: "4.27.0";
    --polaris-animation-skeleton-shimmer: polaris-SkeletonShimmerAnimation;
    --toast-translate-y-out: 15rem;
    --toast-translate-y-in: 0;
    --global-ribbon-height: 0px;
    --p-text-subdued: #6d7175;
    --p-card-shadow: 0 .2rem .4rem #dfe3e8;
    --top-bar-background: #00848e;
    --top-bar-background-lighter: #1d9ba4;
    --top-bar-color: #f9fafb;
    --p-frame-offset: 0px;
    font-family: -apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
    cursor: pointer;
    box-sizing: border-box;
    fill: #292824;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 1px rgba(66,71,76,.45), 0 2px 1px rgba(0,0,0,.05);
  }
</style>

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

<script type="text/javascript">
  NUMBER_OF_CAROUSELS = 38

  function initializeCarousel(carousel) {
    $(carousel).slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      dots: true,
      infinite: true,
      cssEase: 'linear',
      prevArrow: '<svg viewBox="0 0 20 20" class="_1ycOA _left"><path d="M12 16a.997.997 0 0 1-.707-.293l-5-5a.999.999 0 0 1 0-1.414l5-5a.999.999 0 1 1 1.414 1.414L8.414 10l4.293 4.293A.999.999 0 0 1 12 16" fill-rule="evenodd"></path></svg>',
      nextArrow: '<svg viewBox="0 0 20 20" class="_1ycOA _right"><path d="M8 16a.999.999 0 0 1-.707-1.707L11.586 10 7.293 5.707a.999.999 0 1 1 1.414-1.414l5 5a.999.999 0 0 1 0 1.414l-5 5A.997.997 0 0 1 8 16" fill-rule="evenodd"></path></svg>',
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1,
            infinite: true,
            dots: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    })
  }

  function handleShowButtonForCarousel(carouselNumber) {
    if ($('.carousel-change' + carouselNumber).hasClass('show-more')) {
      $('.slider' + carouselNumber).slick('unslick');
      $('.show-more').text('Show Less');
      $('.show-more').addClass('show-less');
      $('.show-more').removeClass('show-more');
    } else if ($('.carousel-change' + carouselNumber).hasClass('show-less')) {
      $('.show-less').text('Show More');
      $('.show-less').addClass('show-more');
      $('.show-less').removeClass('show-less');
      initializeCarousel('.slider' + carouselNumber)
    }
  }

  function moreThanThreeChildren(carouselIndex) {
    var sliderSize = $('.slider' + carouselIndex + ' > .slick-list > .slick-track').children().length
    return sliderSize > 3 
  }

  function handleAllShowButtons() {
    for (let carouselIndex = 1; carouselIndex <= NUMBER_OF_CAROUSELS; carouselIndex++) {
      if (moreThanThreeChildren(carouselIndex)) {
        console.log(carouselIndex, "good")
        $('.carousel-change' + carouselIndex).click(() => { handleShowButtonForCarousel(carouselIndex) });
      } else {
        setTimeout(() => {
          console.log(carouselIndex, "bad")
          $('.slider' + carouselIndex).slick('unslick');
          $('.carousel-change' + carouselIndex).remove();
        }, 200)
      }
    }
  }

  $(document).ready(function () {
    initializeCarousel('.test-carousel');
    handleAllShowButtons();
  });
</script>
