<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content" course-vehicle="{{ course.properties.course_vehicle }}">
  <div class="np-card">
    <div class="np-card-container">
      {% if course.ribbon %}
        <div class="np-card-ribbon">
          {{ course.ribbon }}
        </div>
      {% endif %}
      <img
        class="np-card-image"
        alt="{{ course.name }}"
        src="{{ course.image_url }}"
      >
      <div class="np-card-content np-card-content-vertical np-card-padding">
        <div class='np-card-header-rate' style='display: flex; justify-content: space-between;'>
          <h3 class="np-card-content-title" style='margin: 0.6rem 0; align-self: center;'>
            {{ course.name }}
          </h3>
          {% comment %} <div class='np-card-header-right'>
            <div class='np-card-header-right-rating' style='color: #bac4ca; font-size: 0.75rem !important; align-self: center; font-weight: 700;'>
              {{course.properties.np_course_rating}} ({{course.properties.np_course_rating_count}})
            </div>
            <i class='np-card-header-right-star far fa-star' style='padding-left: 10px; color: #ff2c00; align-self: center;'></i>
          </div> {% endcomment %}
      </div>
        <div class="np-card-content-subtitle">
          {{ course.instructor_names }}
        </div>
        <div class="np-card-content-footer">
          <div class="np-card-content-progress np-button-color">
            {% t shared.progress, count: course.progress %}
          </div>
          {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
          {% if course.has_to_restart? %}
            {% include "course_version_outdated_popup", path: course_path %}
          {% endif %}
          <a class="np-button np-button-wide" href="{{ course_path }}">
            {% t shared.view %}
          </a>
        </div>
      </div>
    </div>
  </div>
</div>