{% assign not_started_flag = false %}
{% assign in_progress_flag = false %}
{% assign completed_flag = false %} 

{% if courses.enrolled.any? %}
    {% for course in courses.enrolled %}
      {% if course.progress == 0 %}
        {% assign not_started_flag = true %}
      {% elsif course.progress > 0 and course.progress < 100 %}
        {% assign in_progress_flag = true %}
      {% else %}
        {% assign completed_flag = true %}
      {% endif %}
    {% endfor %}
{% endif %}

{% if not_started_flag%}
    <div class="role-quick-link-heading" style="color:red">
      Not Started
    </div>
    <div class="row row-with-thumbnails">
      {% for course in courses.enrolled %}
        {% if course.progress == 0 %}
            <div class="{{ class }}">
                {% include "cards_course" with course %}
            </div>
        {% endif %}
      {% endfor %}
    </div>
{% endif %}

{% if in_progress_flag == true  %}
    <div class="role-quick-link-heading" style="color:#7319F2">
      In Progress
    </div>
    <div class="row row-with-thumbnails">
      {% for course in courses.enrolled %}
        {% if course.progress > 0 and course.progress < 100%}
            <div class="{{ class }}">
                {% include "cards_course" with course %}
            </div>
        {% endif %}
      {% endfor %}
    </div>
{% endif %}

{% if completed_flag%}
    <div class="role-quick-link-heading" style="color:green">
      Completed
    </div>
    <div class="row row-with-thumbnails">
      {% for course in courses.enrolled %}
        {% if course.progress == 100 %}
            <div class="{{ class }}">
                {% include "cards_course" with course %}
            </div>
        {% endif %}
      {% endfor %}
    </div>
{% endif %}  
  

<style>

  .role-quick-link-heading {
    font-size:20px!important; 
    font-weight: 600!important;
    text-align: left; 
    padding-bottom: 15px;
  }

</style>