{% if features.learning_paths? %}
  <div class="learning-paths-wrapper filterable-section" data-type="learning-paths">
    <div class="row lps-in-progress show">
      <div class="col-xs-12">
        <div class="row">
          <div class="col-xs-12 col-md-7 small-heading" id="courses-in-progress-header">In Progress</div>
          <div class="col-xs-5 col-lg-3 col-lg-offset-2 np-hidden-mobile small-heading" id="courses-in-progress-header-2">My Progress</div>
        </div>
      </div>

      <div class="col-xs-12">
        {% assign num_of_in_progress_lps = 0 %}
        {% for learning_path in items %}
          {% assign lp_progress = 0 %}
          {% if learning_path.enrolled? %}
            {% assign lp_courses_count = 0 | times: 1 %}
            {% assign sum_of_progress = 0.0 | times: 1 %}
            
            {% for item in learning_path.items %}
              {% if item.course? %}
                {% assign lp_courses_count = lp_courses_count | plus: 1 %}
                {% assign sum_of_progress = sum_of_progress | plus: item.progress %}
              {% endif %}
            {% endfor %}

            {% if lp_courses_count == 0 %}
              {% assign lp_progress = 0 %}
            {% else %}
              {% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
            {% endif %}
          {% else %}
            {% assign lp_progress = 0 %}
          {% endif %}
         
          {% if lp_progress < 100 %}
            <div class="row dashboard-learning-paths-row active" data-status="in-progress" style="display:none">
              <div class="col-xs-12 col-md-7">
                {% include "cards_learning_path_new_styles" with learning_path %}
              </div>

              <div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
                <div class="course-progress-wrapper">
                  {% 
                    include "progress_circle", 
                    name: learning_path.id,
                    count: lp_progress, 
                    total: 100,
                    size: "120",
                    stroke_color: "#02AB73",
                    stroke_color_bg: "rgba(255, 255, 255)" 
                  %}
                </div>          
              </div>
            </div>
            {% assign num_of_in_progress_lps = num_of_in_progress_lps | plus: 1 %}
          {% endif %}
        {% endfor %}

        {% if num_of_in_progress_lps > 6 %}
          <div id="showMoreInProgressLps" class="show-more-button">View All Learning Paths</div>
        {% endif %}

        {% if num_of_in_progress_lps == 0 %}
          <div class="col-xs-12 dashboard-zero-state">
            {% capture message %}
              You don't have any learning paths currently in progress.
            {% endcapture %}
            {% include "courses_zero_state", message: message %}
          </div>
        {% endif %}
      </div>
    </div>

    <div class="row lps-completed">
      <div class="col-xs-12">
        <div class="row">
          <div class="col-xs-12 col-md-7 small-heading" id="lps-completed-header">Completed</div>
          <div class="col-xs-5 col-lg-3 col-lg-offset-2 np-hidden-mobile small-heading" id="lps-completed-header-2">Completion Status</div>
        </div>
      </div>

      <div class="col-xs-12">
        {% assign num_of_completed_lps = 0 %}
        {% for learning_path in items %}
          {% assign lp_progress = 0 %}
          {% if learning_path.enrolled? %}
            {% assign lp_courses_count = 0 | times: 1 %}
            {% assign sum_of_progress = 0.0 | times: 1 %}
            
            {% for item in learning_path.items %}
              {% if item.course? %}
                {% assign lp_courses_count = lp_courses_count | plus: 1 %}
                {% assign sum_of_progress = sum_of_progress | plus: item.progress %}
              {% endif %}
            {% endfor %}

            {% if lp_courses_count == 0 %}
              {% assign lp_progress = 0 %}
            {% else %}
              {% assign lp_progress = sum_of_progress | divided_by: lp_courses_count | round %}
            {% endif %}
          {% else %}
            {% assign lp_progress = 0 %}
          {% endif %}

          {% if lp_progress == 100 %}
            <div class="row dashboard-learning-paths-row" data-status="completed" style="display:none">
              <div class="col-xs-12 col-md-7">
                {% include "cards_learning_path_new_styles" with learning_path %}
              </div>

              <div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
                <div class="course-progress-wrapper">
                  {% 
                    include "progress_circle", 
                    name: learning_path.id,
                    count: lp_progress, 
                    total: 100,
                    size: "120",
                    stroke_color: "#02AB73",
                    stroke_color_bg: "rgba(255, 255, 255)" 
                  %}
                </div>          
              </div>
            </div>
            {% assign num_of_completed_lps = num_of_completed_lps | plus: 1 %}
          {% endif %}
        {% endfor %}

        {% if num_of_completed_lps > 6 %}
          <div id="showMoreCompletedLps" class="show-more-button">View All Completed Learning Paths</div>
        {% endif %}

        {% if num_of_completed_lps == 0 %}
          <div class="col-xs-12 dashboard-zero-state">
            {% capture message %}
              You haven't completed any learning paths
            {% endcapture %}
            {% include "courses_zero_state", message: message %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
{% endif %}

{% comment %} <script>
console.log("working")
console.log($(".lps-in-progress .dashboard-learning-paths-row").length)
window.onload = function () {
  console.log($(".lps-in-progress .dashboard-learning-paths-row").length)
    progress_lps_size_li =  $(".lps-in-progress .dashboard-learning-paths-row").length;
    completed_lps_size_li = $(".lps-completed .dashboard-learning-paths-row").length;
    j=3;

    console.log(progress_lps_size_li)

    $(`.lps-in-progress .dashboard-learning-paths-row:lt(${j})`).css('display', 'flex');   
    $('#showMoreInProgressLps').click(function () {
      j = progress_lps_size_li
      $(`.lps-in-progress .dashboard-learning-paths-row:lt(${j}))`).css('display', 'flex');
      if(x == progress_lps_size_li){
        $('#showMoreInProgressLps').hide();
      }
    });

    $(`.lps-completed .dashboard-learning-paths-row:lt(${j})`).css('display', 'flex');   
    $('#showMoreCompletedLps').click(function () {
      j = progress_lps_size_li
      $(`.lps-completed .dashboard-learning-paths-row:lt(${j}))`).css('display', 'flex');
      if(j == progress_lps_size_li){
        $('#showMoreCompletedLps').hide();
      }
    });
    
};

</script> {% endcomment %}