<div class="row list-of-courses">
  {% for course in courses.enrolled %}
      {% assign talent_lms_learner = current_person.properties.talent_lms_learner %}
      {% assign talent_lms_course = course.properties.talent_lms_course %}
      {% assign course_previously_completed = false %}
      {% if talent_lms_course and talent_lms_learner %}
        {% assign course_previously_completed = true %}
      {% endif %}

      {% assign status = "not-started" %}
      {% if course.progress == 0 %}
        {% if course_previously_completed == true %}
          {% assign status = "completed" %}
        {% else %}
          {% assign status = "not-started" %}
        {% endif %}
      {% elsif course.progress == 100 %}
        {% assign status = "completed" %}
      {% else %}
        {% if course_previously_completed == true %}
          {% assign status = "completed" %}
        {% else %}
          {% assign status = "in-progress" %}
        {% endif %}
      {% endif %}

      <div class="course-container col-xs-12 col-md-6 col-lg-4"
          style="display: none;"
          data-status="{{status}}"
          data-level="{{course.properties.experience}}"
          data-name="{{ course.name }}"
          >
        {% include 'cards_course' with course  %}
      </div>
  {% endfor %}
</div>

<style>
  .list-card .np-card-container {
    flex-direction: row;
    align-items: center;
    background-color: transparent;
  }

  .list-card .np-card-image {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    margin-right: 16px;
    object-fit: cover;
  }

  .list-card .np-card-content-vertical {
    flex-direction: row;
  }

  .list-card .np-card-content {
    padding: 0;
    align-items: center;
  }

  .list-card .np-card-content-title {
    margin-top: 0;
    margin-bottom: 0;
  }

  .list-card .np-card-content-subtitle {
    margin-top: 3px;
    min-height: 0;
  }

  .list-card .np-card-content-footer {
    width: 40%;
    align-items: center;
    margin-top: 0;
  }

  .list-card .np-card-content-progress {
    margin-top: 0;
  }

  .list-card .list-card-titles {
    width: 60%;
    margin-right: 8px;
  }

  .list-card .list-hide {
    display: none;
  }

  .list-card .list-show {
    display: block;
  }

  .list-show {
    display: none;
  }
</style>