{% include "side_navigation_bar" %}


<div class="">
  {% comment %} Events {% endcomment %}
  {% if current_school.apps.instructor_led_training.active? %}
  <div class="grid">
    {% if current_person.upcoming_registered_events.any? %}
      {% include "events" %}
    {% else %}
      {% include "events_empty" %}
    {% endif %}
   </div>
  {% endif %}

  {% comment %} Courses {% endcomment %}
  <!-- Started Courses -->
  <div class="single-carousel" style="margin-top: 15px;">
    <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">
          In-progress Courses</h2>
      </div>
      <p class="carousel-change1 show-more">See More</p>
    </div>

    <div class="grid grid--equal-height slider1 test-carousel">
      {%- for course in courses -%}
        {% if course.progress > 0 and course.progress < 100 %}
          {% include 'course_with_progress' %}
        {%- endif -%}
      {%- endfor -%}
    </div>
  </div>
  <!-- Started Courses -->

  <!-- Completed 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 sainte-colombe-medium heading--1 color-indigo-dark hunt-padding-b">
          Completed Courses</h2>
      </div>
      <p class="carousel-change2 show-more">See More</p>
    </div>

    <div class="grid grid--equal-height slider2 test-carousel">
      {%- for course in courses -%}
        {% if course.progress == 100 %}
          {% include 'course_with_progress' %}
        {%- endif -%}
      {%- endfor -%}
    </div>
  </div>
  <!-- Completed Courses -->
</div>
  
  
  <style>

  
  .uk-panel-badge {
      right: 18px !important;
  }
  @media only screen and (max-width: 1024px) {
  
  .uk-panel-badge {
      right: 10px !important;
  }
  }
  @media only screen and (max-width: 600px) {
  
  .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>
    window.history.pushState('page2', 'Title', '/my_courses');
  </script>

  <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 type="text/javascript">
  $(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
        }
      }
    ]
  })
  });
  
  </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>