{%comment%}{% if learning_path.progress == 0%}
  {% assign wrapperClassBar =  "np-button-background-color np-card-progress-bar red-bar"%}
  {% assign wrapperClassText =  "np-card-content-progress np-button-color red-text"%}
  {% assign wrapperClassStatus =  "np-card-content-progress np-button-color red-text"%}
{% else if learning_path.progress > 0 and learning_path.progress < 100%}
  {% assign wrapperClassBar =  "np-button-background-color np-card-progress-bar yellow-bar"%}
  {% assign wrapperClassText =  "np-card-content-progress np-button-color yellow-text"%}
  {% assign wrapperClassStatus =  "np-card-content-progress np-button-color yellow-text"%}
{% else %}
  {% assign wrapperClassBar =  "np-button-background-color np-card-progress-bar green-bar"%}
  {% assign wrapperClassText =  "np-card-content-progress np-button-color green-text"%}
  {% assign wrapperClassStatus =  "np-card-content-progress np-button-color green-text"%}
{% endif %}{%endcomment%}

{% 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 %}
{% comment %} 
{% for group in current_person.groups %}
    {{group.id}}
{% endfor %}  {% endcomment %}


<div class="np-card np-no-horizontal-padding">
  <div class="np-card-container">
    <div class="np-learning-path">
      <img
        alt="{{ learning_path.name }}"
        class="np-card-image np-learning-path-image"
        src="{{ learning_path.image_url }}"
      />
      <div class="np-card-text-wrapper">
        <div class="np-hidden-desktop np-card-header">
          <i class="np-card-header-icon far fa-road"></i>
          <div class="np-card-header-type">{% t shared.learning_path.title %}</div>
          <div class="np-hidden-desktop  np-card-header-items-count">
            {{ learning_path.items.count }} {% t .items %}
          </div>
        </div>
        <div class="np-hidden-mobile np-card-header">
          <div class="np-card-header-type">{% t shared.learning_path.title %}</div>
          <i class="np-card-header-icon far fa-road"></i>
        </div>

        <div class="np-card-content np-card-padding np-card-content-vertical">
          <h3 class="np-card-content-title">
            {{ learning_path.name }}
          </h3>

          <div class="np-card-content-subtitle">
            {{ learning_path.instructor_names }}
          </div>

          <div class="np-hidden-mobile np-card-content-description">
            {{ learning_path.description }}
          </div>

          {% if lp_progress > 0 %}
          <div class="np-card-content-progress np-button-color">
            <p style="margin-bottom:-25px">{{ lp_progress }}%</p> <p class="course-completion" style="margin-left:25px"><span>Complete</span></p>
          </div>
          {% else %}
            <div class="np-card-content-progress np-button-color">
              Not started
            </div>
          {% endif %}

          <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 class="np-card-content-footer">
            <div class="np-hidden-desktop np-card-content-progress
            np-button-color">
              {% t shared.progress, count: lp_progress %}
            </div>
            <a class="np-button lp" href="{% route learning_path, id: learning_path.id %}">
              {% t shared.view %}
            </a>
            <span class="np-hidden-mobile np-learning-path-items">
              <i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
              <span class="np-learning-path-items-count">
                {{ learning_path.items.count }} {% t .items %}
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="np-card-stack">
    <div class="np-card-stack-level-1"></div>
    <div class="np-card-stack-level-2"></div>
  </div>
</div>