{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<div class="np-card course-card">
  <a class="np-card-container" href="{{ course_path }}">
    {% 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-content-subtitle">
        {{ course.instructor_names }} {% unless course.instructor_names == "" and course.properties.course_length == "none" %}|{% endunless %} {% unless course.properties.course_length == "none" %} 30 Minutes{% endunless %}
      </div>
      <h3 class="np-card-content-title">
        {{ course.name }}
      </h3>
      <div class="np-card-content-subtitle card-description">
        {{course.full_description}}
      </div>
      <div class="np-card-content-footer">
        {% comment %} <div class="np-card-content-progress np-button-color">
          {% t shared.progress, count: course.progress %}
        </div> {% endcomment %}
        
        {% if course.has_to_restart? %}
          {% include "course_version_outdated_popup", path: course_path %}
        {% endif %}
        <div class="np-card-link">
          {% t shared.view %} <i class="fas fa-arrow-right"></i>
        </div>
      </div>
    </div>
  </a>
</div>