<div class="course-progress-widget-container">
<div class="np-dashboard-resources-title">
  Course Progress
</div>
<div class="np-dashboard-resources course-progress-widget">
  <div class="card course-widget-card">
    <div class="np-card-container no-box-shadow">
      {% 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: "#a0874e"
            , stroke_color_bg: "rgba(255, 255, 255, 0.15)"
          %}
        </li>
        <li>
          {% include "progress_circle"
            , name: 'In Progress'
            , count: countInProgress
            , total: countTotal
            , size: "120"
            , stroke_color: "rgba(43, 178, 76, 1)"
            , stroke_color_bg: "rgba(255, 255, 255, 0.15)"
          %}
        </li>
      </ul>
    </div>
  </div>
</div>
</div>


<style>

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

  .np-dashboard-border {
    border: 1px solid #ccc;
    box-shadow: none;
    border-radius: 0;
	width: 55%;
  }
</style>
