<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 | split: ' v2' | first }}"
        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" {% if nz_status %}style='margin: 0.6rem -10px; align-self: center;'{% endif %}>
            {% if course.name contains "v2" %}
              {{ course.name | split: ' v2' | first }}
            {% elsif course.name contains "v3" %}
              {{ course.name | split: ' v3' | first }}    
            {% else %}
              {{ course.name }}
            {% endif %}
          </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">
          {% if course.progress == 100 %}
            <div class="np-card-content-progress" {% if nz_status %}style="color: rgb(0, 165, 0); font-size: 1.5rem; margin-left: -10px;"{% endif %}>
              {% t shared.progress, count: course.progress %}
            </div>
          {% else %}
            <div class="np-card-content-progress np-button-color" {% if nz_status %}style="font-size: 1.5rem; margin-left: -10px"{% endif %}>
              {% t shared.progress, count: course.progress %}
            </div>
          {% endif %}
          {% 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 }}" {% if nz_status %}style="margin-right: -10px; {% if course.progress == 100 %} border: 2px solid #ff2c00; color: #ff2c00; background: white;{% endif %}"{% endif %}>
            {% if nz_status %}
              {% if course.progress == 100%}
                View
              {% else %}
                {% if course.progress > 0%}
                  Continue
                {% else %}
                  Start
                {% endif %}
              {% endif %}
            {% else %}
              {% t shared.view %}
            {% endif %}
          </a>
        </div>
      </div>
    </div>
  </div>
</div>