<div class="np-card np-card-horizontal">
  <div class="np-card-container">
    {% if course.ribbon %}
      <div class="np-card-ribbon">
        {{ course.ribbon }}
      </div>
    {% endif %}
    <div class="np-card-image-wrapper">
      <img
        class="np-card-image"
        alt="{{ course.name }}"
        src="{{ course.image_url }}"
      >
    </div>
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <h3 class="np-card-content-title">
        {{ course.name }}
      </h3>
      <div class="np-card-content-short-description">
        {{ course.short_description}}
      </div>
      <div class="np-card-content-subtitle">
        {{ course.instructor_names }}
      </div>
      <div class="np-card-content-footer">
        {% comment %} <div class="np-card-content-progress np-button-color">
          {{ course.progress }}
        </div> {% endcomment %}
        {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
        
        <a class="np-button np-button-wide" href="{{ course_path }}">
          {% t shared.view %}
        </a>
        {% if course.has_to_restart? %}
          {% include "course_version_outdated_popup", path: course_path %}
        {% endif %}
        {% if course.properties.course_time != "none" %}
          <div class="course-time">{{course.properties.course_time}} min</div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
