{% assign num_of_getting_started_courses = 0 %}
<div class="homepage-getting-started-section">
  <div class="row">
    <div class="col-xs-12 col-sm-7">
      <div class="getting-started-heading homepage-subtitles">Learning Gems &#128142;</div>
    </div>
    <div class="col-xs-12 col-sm-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
      <div class="getting-started-heading progress-heading homepage-subtitles hidden-tab">My progress</div>
    </div>
  </div>

  {% for course in courses.enrolled %}
  {% if course.progress < 100 %}
    {% if course.name contains "Harri Learning Gem: Org Admin" %}
          <div class="row getting-started-course-row">
            <div class="col-xs-12 col-md-7">
              {% include "cards_course_horizontal" with course %}     
            </div>
            <div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
              <div class="course-progress-wrapper">
                {% 
                  include "progress_circle", 
                  name: course.id,
                  count: course.progress , 
                  total: 100,
                  size: "120",
                  stroke_color: "#de352a",
                  stroke_color_bg: "#fff" 
                %}
              </div>          
            </div>
          </div>
      {% endif %}
      {% endif %}
  {% endfor %}

  {% for course in courses.enrolled %}
  {% if course.progress < 100 %}
    {% if course.name contains "Harri Learning Gem: CoreHR" %}
          <div class="row getting-started-course-row">
            <div class="col-xs-12 col-md-7">
              {% include "cards_course_horizontal" with course %}     
            </div>
            <div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
              <div class="course-progress-wrapper">
                {% 
                  include "progress_circle", 
                  name: course.id,
                  count: course.progress , 
                  total: 100,
                  size: "120",
                  stroke_color: "#de352a",
                  stroke_color_bg: "#fff" 
                %}
              </div>          
            </div>
          </div>
      {% endif %}
      {% endif %}
  {% endfor %}

  {% for course in courses.enrolled %}
  {% if course.progress < 100 %}
    {% if course.name contains "Harri Learning Gem: Forecasting" %}
          <div class="row getting-started-course-row">
            <div class="col-xs-12 col-md-7">
              {% include "cards_course_horizontal" with course %}     
            </div>
            <div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
              <div class="course-progress-wrapper">
                {% 
                  include "progress_circle", 
                  name: course.id,
                  count: course.progress , 
                  total: 100,
                  size: "120",
                  stroke_color: "#de352a",
                  stroke_color_bg: "#fff" 
                %}
              </div>          
            </div>
          </div>
      {% endif %}
      {% endif %}
  {% endfor %}

    {% for course in courses.enrolled %}
  {% if course.progress < 100 %}
    {% if course.name contains "Harri Learning Gem: Scheduling" %}
          <div class="row getting-started-course-row">
            <div class="col-xs-12 col-md-7">
              {% include "cards_course_horizontal" with course %}     
            </div>
            <div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
              <div class="course-progress-wrapper">
                {% 
                  include "progress_circle", 
                  name: course.id,
                  count: course.progress , 
                  total: 100,
                  size: "120",
                  stroke_color: "#de352a",
                  stroke_color_bg: "#fff" 
                %}
              </div>          
            </div>
          </div>
      {% endif %}
      {% endif %}
  {% endfor %}

  {% for course in courses.enrolled %}
  {% if course.progress < 100 %}
    {% if course.name contains "Harri Learning Gem: Timeclocks" %}
          <div class="row getting-started-course-row">
            <div class="col-xs-12 col-md-7">
              {% include "cards_course_horizontal" with course %}     
            </div>
            <div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
              <div class="course-progress-wrapper">
                {% 
                  include "progress_circle", 
                  name: course.id,
                  count: course.progress , 
                  total: 100,
                  size: "120",
                  stroke_color: "#de352a",
                  stroke_color_bg: "#fff" 
                %}
              </div>          
            </div>
          </div>
      {% endif %}
      {% endif %}
  {% endfor %}

  {% for course in courses.enrolled %}
  {% if course.progress < 100 %}
    {% if course.name contains "Harri Learning Gem: Payroll" %}
          <div class="row getting-started-course-row">
            <div class="col-xs-12 col-md-7">
              {% include "cards_course_horizontal" with course %}     
            </div>
            <div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
              <div class="course-progress-wrapper">
                {% 
                  include "progress_circle", 
                  name: course.id,
                  count: course.progress , 
                  total: 100,
                  size: "120",
                  stroke_color: "#de352a",
                  stroke_color_bg: "#fff" 
                %}
              </div>          
            </div>
          </div>
      {% endif %}
      {% endif %}
  {% endfor %}

  {% for course in courses.enrolled %}
  {% if course.progress < 100 %}
    {% if course.name contains "Harri Learning Gem: Harri Mobile" %}
          <div class="row getting-started-course-row">
            <div class="col-xs-12 col-md-7">
              {% include "cards_course_horizontal" with course %}     
            </div>
            <div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
              <div class="course-progress-wrapper">
                {% 
                  include "progress_circle", 
                  name: course.id,
                  count: course.progress , 
                  total: 100,
                  size: "120",
                  stroke_color: "#de352a",
                  stroke_color_bg: "#fff" 
                %}
              </div>          
            </div>
          </div>
      {% endif %}
      {% endif %}
  {% endfor %}

  {% for course in courses.enrolled %}
    {% if course.progress == 100 %}
      {% for cat in course.categories %}
        {% assign cat_name = cat.name | upcase %}
        {% if cat_name == "LEARNING GEMS" %}
          {% assign num_of_getting_started_courses = num_of_getting_started_courses | plus: 1 %}
          <div class="row getting-started-course-row">

            <div class="col-xs-12 col-md-7">
              {% include "cards_course_horizontal" with course %}     
            </div>
  
            <div class="col-xs-12 col-md-5 col-lg-3 col-lg-offset-2 np-hidden-mobile">
              <div class="course-progress-wrapper">
                {% 
                  include "progress_circle", 
                  name: course.id,
                  count: course.progress , 
                  total: 100,
                  size: "120",
                  stroke_color: "#de352a",
                  stroke_color_bg: "#fff" 
                %}
              </div>          
            </div>
          </div>
        {% endif %}
      {% endfor %}
      {% endif %}
  {% endfor %}
  </div>
</div>

  <style>
    .getting-started-heading {
      font-size: 18px;
      margin-bottom: 24px;
      font-weight:500;
      margin-top:32px;
    }

    .getting-started-course-row {
      margin-bottom:35px;
    }

    @media (min-width:768px) {
      .getting-started-heading {
        font-size: 24px;
        margin-bottom: 32px;
        margin-top:64px;
      }
    }
    @media (max-width: 1024px) {
        .progress-heading, .course-progress-wrapper {
            display: none;
        }
    }
  </style>

{% comment %}
  <script>
    console.log("num of learning gems {{num_of_getting_started_courses}}")
    if (Number("{{num_of_getting_started_courses}}") == 0) {
      document.querySelector(".homepage-getting-started-section").style.display = "none"
    }
  </script>
  {% endcomment %}