{% assign enrolled_courses = "" %}
{% assign lp_items =  learning_path.items %}
{% assign lp_items_completed_count = 0 %}
{% assign course_object = "" %}

{% for lp_item in lp_items %}
  {% if lp_item.completed? %}
    {% assign lp_items_completed_count = lp_items_completed_count | plus: 1 %}
  {% endif %}
{% endfor %}

{% if courses.enrolled.any? %}
  {% assign enrolled_courses = courses.enrolled %}
{% endif %}

 {% assign lp_name_formatted = learning_path.name | replace: " ", "-" | downcase %}
<div class="learning-path-heading" data-lp="{{lp_name_formatted}}">
  <div class="learning-path-title">{{learning_path.name}} Accreditation</div>
  <div class="learning-path-count">{{lp_items_completed_count}} / {{ lp_items.count }}</div>
</div>

<div class="learning-path-card">
  <div class="lp-button-wrapper" style='display:none'>
    {% learning_path_next_step_button learning_path, class: "lp-button np-top-button np-button" %}
  </div>
  <div class="lp-card-content-wrapper">
    {% for lp_item in lp_items %}

      {% for course in enrolled_courses %}
        {% if course.id == lp_item.id %}
          {% assign course_object = course %} 
        {% endif %}
      {% endfor %}
      {% if lp_item.course? %}
        {% assign progress_status = "not-started" %}

        {% if lp_item.progress > 0 and lp_item.progress < 100 %}
          {% assign progress_status = "in-progress" %}
        {% endif %}

        {% if lp_item.completed? %}
          {% assign progress_status = "complete" %}
        {% endif %}

        {% if lp_item.unlocked? %}
          <a class="learning-path-course {{progress_status}}" href="{% route learning_path_course, learning_path_id: learning_path.id, id: lp_item.id %}">
            <div class="lp-course-img">    
              {% if lp_item.image contains "cdn.northpass.com/assets/defaults/" %}
                <div class="empty-img"></div>
              {% else %}
                <img src="{{lp_item.image}}" />
              {% endif %}
            </div>
            <div class="lp-course-title">{{lp_item.name}} ({{course_object.properties.experience}})</div>
          </a>
        {% else %}
          <div class="learning-path-course {{progress_status}}">
            <div class="lp-course-img">
              {% if lp_item.image contains "cdn.northpass.com/assets/defaults/" %}
                <div class="empty-img"></div>
              {% else %}
                <img src="{{lp_item.image}}" />
              {% endif %}
            </div>
            <div class="lp-course-title">{{lp_item.name}} ({{course_object.properties.experience}})</div>
          </div>
        {% endif %}
      {% endif %}
    {% endfor %}
  </div>
</div>
