<div class="np-dashboard-resources widget-course-progress">
  <div class="np-card">
    <div class="np-card-container np-dashboard-border">
        {% if courses.enrolled.any? %}
          {% assign countComplete = 0 %}
          {% assign countInProgress = 0 %}
          {% assign countNotStarted = 0 %}
          {% assign countTotal = 0 | times: 1.0 %}
          {% for course in courses.enrolled %}
            {% assign countTotal = countTotal | plus: 1 %}
            {% if course.progress == 100 %}
              {% assign countComplete = countComplete | plus: 1 %}
            {% endif %}
            {% if course.progress > 0 and course.progress < 100 %}
              {% assign countInProgress = countInProgress | plus: 1 %}
            {% endif %}
            {% if course.progress == 0 %}
              {% assign countNotStarted = countNotStarted | plus: 1 %}
            {% endif %}
          {% endfor %}
          <ul class="progress-circle-list">
            <li>
              {% 
                include "progress_circle", 
                name:'Completed' , 
                count: countComplete , 
                total: countTotal,
                size: "120",
                stroke_color: "rgba(0, 21, 136, 1)",
                stroke_color_bg: "rgba(5, 140, 207, 0.7)" 
              %}
            </li>
            <li>
              {% 
                include "progress_circle", 
                name:'In Progress' , 
                count: countInProgress , 
                total: countTotal,
                size: "120",
                stroke_color: "rgba(0, 21, 136, 1)",
                stroke_color_bg: "rgba(5, 140, 207, 0.7)"  
              %}
            </li>
          </ul>
        {% else %}
          {% capture message %}
            {% t shared.zero_state.courses.index,
              key: current_school.course_vocabulary
            %}
          {% endcapture %}
          {% include "courses_zero_state", message: message %}
        {% endif %}
    </div>
  </div>
</div>


<style>

.widget-course-progress .np-card {
  padding:0 0 32px;
}

  .progress-circle-list { 
    padding: 0; 
    list-style-type: none !important;     
    justify-content: space-around;
    display:flex;
    align-items:center;
    max-width: 400px;
    width:100%;
    margin: auto;
  }
</style>