<a href="{% route learning_path, id: learning_path.id %}" class="np-card np-card-learning-path-progress">
  <div class="np-card-container lp-progress-card-wrapper">
    <div class="learning-path-title np-hidden-desktop">{{ learning_path.name }}</div>
    <div class="lp-progress-circle-wrapper">
      <svg
        class="progress-ring"
        width="130"
        height="130"
        data-total="{{learning_path.items.count}}"
        >      
        <circle
          class="progress-ring__circle circle-bg"
          stroke="#E0E4EB"
          stroke-width="9"
          fill="transparent"
          r="57"
          cx="65"
          cy="65"/>
          <circle
          class="progress-ring__circle circle-progress"
          stroke="#3C228A"
          stroke-width="9"
          fill="transparent"
          r="57"
          cx="65"
          cy="65"/>
          <text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="#333" dy=".3em">{{learning_path.progress}}%</text>
      </svg>
    </div>
    <div class="lp-content">
      <div class="learning-path-title np-hidden-mobile">{{ learning_path.name }}</div>
      <div class="lp-total-courses">
        Total Courses: <span>{{ learning_path.items.count }} Courses</span>
      </div>
      <div class="lp-completed-items">
        {% assign completed_count = 0 %}

        {% for item in learning_path.items %}
          {% if item.completed? %}
            {% assign completed_count = completed_count | plus: 1 %}
          {% endif %}
        {% endfor %}
        Completed:     
        {% if completed_count > 1 or completed_count == 0 %}
          <span><div data-completed='{{completed_count}}'>{{completed_count}}</div> Courses</span>
        {% else %}
          <span><div data-completed='{{completed_count}}'>{{completed_count}}</div>  Course</span>
        {% endif %}       
      </div>
    </div>
  </div>
</a>



