{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% include "sub_navigation" %}
{% assign catalog_courses = courses.in_catalog %}
<main class="np-main np-dashboard np-subpage-container np-max-width">
  <div class="row np-flex-center">
    <div class="col-xs-12 col-sm-8">
      {% include "dashboard_ongoing_training" items: catalog_courses %}

      
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12" style="display:flex; flex-direction:column;">
          <div class="np-section-header">Progress Tracker</div>
          <div class="learning-path-progress-container">
            <div class="row">
              {% assign lps_in_progress = 0 %}
              {% assign enrolled_learning_paths = learning_paths.enrolled | sort: "progress" | reverse %}
              {% for learning_path in enrolled_learning_paths %}
                {% if learning_path.progress > 0 %}
                  {% assign lps_in_progress = lps_in_progress | plus: 1 %}

                  {% if lps_in_progress < 4 %}
                    <div class="col-xs-12 col-md-6">
                      {% include "cards_learning_path_progress" %}
                  </div>

                  {% endif %}
                {% endif %}
              {% endfor %}

              {% if lps_in_progress > 0 %}
                <div class="see-more-wrapper">
                  <a href="/app/dashboard" style="margin-top:24px;">See more</a>
                </div>
              {% endif %}
              {% if lps_in_progress == 0 %}
                <div class="col-xs-12">
                  <div class="np-learning-paths-resources-container">
                    <div class="np-zero-state-text">
                      Yikes! You don't have any learning Paths in progress.
                    </div>
                    <img class="np-zero-state-learning-paths" alt="" />
                  </div>
                </div>

              {% endif %}
            </div>

          </div>
        </div>
      </div> 
   </div>

  
    {% if features.training_events? %}
      <div class="np-grid-spacing col-xs-12 col-sm-4">
        <div class="np-dashboard-resources-title">
          {% t .upcoming_events %}
        </div>
          {% include "training_events_dashboard" %}
      </div>
    {% endif %}
  
</main>
{% include "footer" %}