

{% 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 %}


<div class="np-card np-no-horizontal-padding np-card-learning-path">
    <div class="np-card-container">
      <div class="np-learning-path">
        <div class="lp-image-wrapper">
          <img
            alt="{{ learning_path.name }}"
            class="np-card-image np-learning-path-image"
            src="{{ learning_path.image_url }}"
          />
        </div>
         
        <div class="np-card-text-wrapper">  
          <div class="np-card-content np-card-padding np-card-content-vertical">
            <h3 class="header-4 fw-semibold">
              {{ learning_path.name }}
            </h3>
  
            <div class="np-hidden-mobile np-card-content-description paragraph-2">
              {{ learning_path.description }}
            </div>
     
            <div class="np-card-content-footer-lp">
              <div class="lp-progress">
                
                <div class="eyebrow-lg fw-semibold {% if lp_progress == 0 %}gray{% endif %}">
                  {% if lp_progress == 0 %}
                    {% t shared.progress, count: lp_progress %}
                  {% elsif lp_progress > 0 and lp_progress < 100 %}
                    {{lp_progress}}%
                  {% else %}
                    <i class="fas fa-check-circle"></i> Completed
                  {% endif %}
                </div>
                <div class="np-hidden-mobile np-card-progress-bar-container">
                  <div
                    style="width: {{ lp_progress }}%"
                    class="np-button-background-color np-card-progress-bar">
                  </div>
                </div>
              </div>
              <a class="np-button" href="{% route learning_path, id: learning_path.id %}">
                {% t shared.view %} Learning Path
              </a>
            </div>         
          </div>
        </div>
      </div>
    </div>
  </div>