<div class="np-dashboard-resources progress-card" style="padding-bottom: 0;">
  <div class="np-card" style="display:inline-flex; margin: auto; padding: 0px !important;">
    <div class="np-card-container np-card-content" style="border-radius: 8px; display: inline-block; height: 12rem; padding-top: 1rem;">
        {% 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(43, 178, 76, 1)",
                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>
        {% 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>
  .progress-circle-list { 
    padding: 0; 
    list-style-type: none !important;     
    justify-content: space-around;
    display: inline-flex;
    align-items: center;
    max-width: 400px;
    margin: auto;
  }
  .progress-card {
    border-radius: 8px; 
    /* background: #001E2E; */
    height: 260px;
    padding: 0;
    display: inline-flex;
  }
  .np-progress-ring-wrapper {
    padding: 0 0.5rem;
  }
  @media screen and (max-width: 1023px) {
    .progress-card {
      height: 190px;
      margin-bottom: 2.187rem;
      display: flex;
    }
    .progress-circle-list {
      display: flex;
    }
  }
</style>