{% comment %} skip-auth {% endcomment %}
{% if current_person.signed_in? %}
  {% assign countComplete = 0 %}
  {% assign countInProgress = 0 %}
  {% assign countNotStarted = 0 %}
  {% assign countTotal = 0 | times: 1.0 %}
  {% for course in courses.enrolled %}
    {% assign countTotal = countTotal | plus: 1 %}
    {% if course.progress == 100 %}
      {% assign countComplete = countComplete | plus: 1 %}
    {% endif %}
    {% if course.progress > 0 and course.progress < 100 %}
      {% assign countInProgress=countInProgress | plus: 1 %}
    {% endif %}
    {% if course.progress==0 %}
      {% assign countNotStarted=countNotStarted | plus: 1 %}
    {% endif %}
  {% endfor %}
{% endif %}
{% assign view_more_counter = 0 %}

{% include "header" %}
{% unless current_person.signed_in? %}
  {% include 'welcome_hero' %}
{% endunless %}
<div class="page-container">

  {% if current_person.signed_in? %}
    <div class="np-hidden-mobile custom-sub-navigation">
      {% include "sub_navigation" %}
    </div>
  {% endif %}


  <main class="np-main np-dashboard np-subpage-container np-max-width custom-main">
    {% if current_person.signed_in? %}
      {% include 'welcome_hero' %}
      {% include 'statistics' %}

      <div class="np-hidden-mobile">
        {% include 'overview_video' %}
      </div>
    {% endif %}

    {% unless current_person.signed_in? %}
      <div class="learning-path-not-logged">
        {% include 'learning_paths_collection' %}
      </div>

      <h2 class="no-course-message" style="display: none;">No courses for this filter!</h2>
      {% include "course_collection_unlogged" %}
      <div class="np-hidden-desktop">
        <div class="np-catalog-courses row row-with-thumbnails homepage-courses">
          {% for course in courses.in_catalog %}
            {% if view_more_counter < 4%}
              {% assign view_more_counter  = view_more_counter | plus: 1%}
              <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
                {% include "cards_course" with course, class: "" %}
              </div>
            {% else %}
              <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content view-more-hidden">
                {% include "cards_course" with course, class: "" %}
              </div>
            {% endif%}
          {% endfor %}

          {% if view_more_counter >= 4%}
            <button class="np-top-button np-button-font-color np-button np-button-big view-more-button" onclick="viewMore()">View More</button>
          {% endif %}
        </div>
      </div>
    {% endunless %}

    {% if current_person.signed_in? %}
      <div class="row np-flex-center homepage-courses-lp-container">
        <div class="col-xs-12 col-sm-8 main-dashboard">
          {% if features.learning_paths? %}
            <div>
              <div class="lp-and-recently-completed-course-container np-hidden-mobile">
                <div style="width: 64%">
                  {% if learning_paths.enrolled.any? %}
                    {% include "learning_paths_index_homepage", items: learning_paths.enrolled %}
                  {% endif %}
                </div>
                <div style="width: 31%">
                  {% include 'recent_course' %}
                </div>
              </div>
              <div>
                {% include 'dashboard_course_filter' %}
                <h2 class="no-course-message" style="display: none;">No courses for this filter!</h2>
                {% include "course_collection" %}
                <div class="np-hidden-desktop">
                  <div class="np-catalog-courses row row-with-thumbnails homepage-courses">
                    {% for course in courses.enrolled %}
                      {% if view_more_counter < 4 %}
                        {% assign view_more_counter  = view_more_counter | plus: 1%}
                        <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
                          {% include "cards_course" with course, class: "" %}
                        </div>
                      {% else %}
                        <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content view-more-hidden">
                          {% include "cards_course" with course, class: "" %}
                        </div>
                      {% endif%}
                    {% endfor %}

                    {% if view_more_counter >= 4%}
                      <button class="np-top-button np-button-font-color np-button np-button-big view-more-button" onclick="viewMore()">View More</button>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    {% endif %}
  </main>
</div>

<script crossorigin="anonymous" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" type="text/javascript"></script>
{% include "footer" %}

<script>
  function initializeCarousel(slickContainerClass, visibleSlides) {
    $(slickContainerClass).slick({
      slidesToShow: visibleSlides,
      slidesToScroll: 1,
      dots: false,
      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>'
    });
  }

  $(document).ready(function () {
    initializeCarousel('.carousel', 3)

    var slider = tns({
      container: `.lp-carousel`,
      items: 1,
      nav: false,
      mouseDrag: true,
      autoHeight: true,
      autoplay: false,
      controls: true,
      autoplayButtonOutput: false,
      navPosition: 'bottom',
      controlsText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>']
    });
  })

  function textDisplayCount() {
    let courseCount = $('#dash-sort').children().length;
    return courseCount
  }
  function selectAll() {
    $(".select-selected").html("All").change();
    filterCourse()
    $(".select-items div").each(function () {
      if ($(this).text() == $(".select-selected").text()) {
        $(this).addClass("same-as-selected");
      } else {
        $(this).removeClass("same-as-selected");
      }
    });
    $(".missing").hide();
  }

</script>
<style>
  .tns-item img {
    margin: auto;
  }

  [data-controls="prev"] { 
    margin-left: -3%;
  }

  [data-controls="next"] { 
    margin-right: -3%;
  }

  .tns-outer {
    position: relative;
    box-shadow: 5px 5px 0px rgb(128 173 220 / 32%);
    border-radius: 8px;
  }

  .tns-controls {
    position: absolute;
    z-index: 100;
    top: 50%;
    transform: translate(0,-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .tns-controls > * {
    border: none;
    letter-spacing: 0.01em !important;
    line-height: 0;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -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 0.2rem 0.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, 0.45), 0 2px 1px rgba(0, 0, 0, 0.05);
  }

  @media (min-width: 769px) and (max-width: 1024px) {
    .custom-sub-navigation {
      width: 30%;
    }

    .custom-main {
      width: 70%;
      padding-top: 0;
    }

    .np-homepage-hero-image {
      min-height: auto;
    }
  }

  @media (min-width: 1025px) and (max-width: 2500px) {
    .custom-sub-navigation {
      width: 25%;
    }

    .custom-main {
      width: 75%;
      padding-top: 0;
    }
  }

  /* @media (min-width: 1025px) {
    .badges {
      width: 19%;
    }
  } */
  .recent-view-header {
    text-align:center;
  }
  @media (min-width: 1025px) and (max-width: 2500px) {
    .recent-view-header {
      padding-top: 1%;
      
    }
  }

  @media (min-width: 2501px) {
    .recent-view-header {
      padding: 5px 110px 0;
    }
  }

  .learning-path-not-logged {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 130px;
    width: 94%;
  }

  @media (max-width: 768px) {
    .homepage-courses-lp-container {
      --bs-gutter-x: 0;
    }
  }

  .homepage-courses {
    max-width: 90%;
    width: 90%;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .lp-carousel > .slick-list > .slick-track{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }

  @media (min-width: 1500px) {
    .lp-carousel > .slick-list > .slick-track > .course-slide > .np-card-container{
      box-shadow: none;
    }

    .lp-carousel > .slick-list {
      box-shadow: 5px 5px 0px rgb(128 173 220 / 32%);
      border-radius: 8px;
    }
  }

  .lp-and-recently-completed-course-container {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .branding-message {
    padding: 55px 0;
    text-align: center;
    font-family: F37 Moon !important;
    font-style: normal;
    font-weight: normal;
  }

  .main-dashboard {
    width: 100%;
  }

  .np-learning-paths-resources {
    display: flex;
  }

  .np-learning-paths-resources > .np-card {
    padding: 0;
    display: flex;
  }

  @media(min-width: 769px) {
    .np-learning-paths-resources > .np-card > .np-card-container {
      height: 138%;
    }

    .np-learning-path {
      height: 100%;
    }

    .np-learning-path-image {
      width: 40%;
    }
  }

  .np-card-text-wrapper {
    display: flex;
  }
</style>