<div class="np-dashboard-resources">
  {% if courses.enrolled.any? %}
  <div class="">
  {% 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="circle-list">
      <li>
        {% include "progress_circle", name:'Completed' , count: countComplete , total: countTotal %}
      </li>
      <li>
        {% include "progress_circle", name:'In Progress' , count: countInProgress , total: countTotal %}
      </li>
      <li>
        {% include "progress_circle", name:'Not Started' , count: countNotStarted , total: countTotal %}
      </li>
    </ul>
  </div>
{% else %}
  {% capture message %}
    {% t shared.zero_state.courses.index,
      key: current_school.course_vocabulary
    %}
  {% endcapture %}
  {% include "courses_zero_state", message: message %}
{% endif %}
</div>

<style>
  .circle-list {
    list-style-type: none !important;
  }
  .align-center {
    align-items: center !important;
}
.progress-ring__circle {
  transition: stroke-dashoffset 0.35s;
}
.progress-ring__circle {
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: center;
}
</style>