<div class="progress-widget">
  <div class="progress-widget-flex-wrapper">
    <div class="progress-item courses-progress">
      {% assign completed_courses_count = 0 %}
      {% for course in courses.enrolled %}
        {% if course.progress == 100 %}
          {% assign completed_courses_count = completed_courses_count | plus: 1 %}
        {% endif %}
      {% endfor %}
      <div class="progress-header">Courses Completed</div>
      <a href="/app/courses?category=not-started" class="progress-link">View Courses not started</a>
      {%
         include "progress_circle",
         count: completed_courses_count,
         total: courses.enrolled.size %}
    </div>
    <div class="progress-item courses-progress">
      {% assign completed_lps_count = 0 %}
      {% for learning_path in learning_paths.enrolled %}
        {% if learning_path.progress == 100 %}
          {% assign completed_lps_count = completed_lps_count | plus: 1 %}
        {% endif %}
      {% endfor %}
      <div class="progress-header">Learning Paths Completed</div>
      <a href="/app/learning_paths?category=completed" class="progress-link">View all Learning Paths</a>
      {%
         include "progress_circle",
         count: completed_lps_count,
         total: learning_paths.enrolled.size %}
    </div>
  </div>
</div>

<style>

  .progress-widget {
    margin-bottom: 32px;
  }

  .progress-widget .progress-item {
    width: 100%;
    margin-bottom: 32px;
  }

  .progress-widget .progress-header {
    color: #000;
    font-size: 20px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 4px;
  }

  .progress-circle-wrapper {
    display: inline-block;
    position: relative;
  }

  .progress-circle-wrapper:before {
    content: "";
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    width: 195px;
    height: 195px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .progress-circle {
    position: relative;
  }

  .progress-widget .progress-link {
    color: #0077B8;
    text-decoration: none;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 16px;
    display: inline-block;
  }

  .progress-widget .progress-link:hover {
    color: #185A7D;
  }

  .progress-circle-big-text {
    color: #002745;
    font-size: 80px;
    font-weight: 600;
    line-height: normal;
  }

  .progress-circle-text {
    color: #000;
    text-align: center;
    font-size: 23px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
  }

  @media(min-width:500px) {
    .progress-widget .progress-widget-flex-wrapper {
      display: flex;
      flex-direction: column;
    }

    .progress-widget .progress-item {
      width: 50%;
    }
  }

  @media(min-width: 1200px) {
    .progress-widget .progress-widget-flex-wrapper {
      flex-direction: row;
    }
  }
</style>