<div id="{{ course.progress }}" class="{{ class }}">
  <div class="np-card course-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">
        <h3 class="np-card-content-title course-card-title" style="min-height: 48px;">
          {{ course.name }}
        </h3>
        <div class="np-card-content-subtitle">
          {{ course.instructor_names }}
        </div>
        <div class="np-card-content-footer">
          <div style="display: flex; flex-direction: column-reverse;" class="np-card-content-progress np-button-color">
            <span>{% t shared.progress, count: course.progress %}</span>
            <span style="color: gray; text-transform: none;">{{course.properties.course_time}} Mins</span>
          </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>
          {% if current_person.signed_in? %}
            {% if course.completed? %}
              <span class="progress-info" style="display: none;">Completed</span>
            {% else %}
                {% if course.progress == 0%}
                  <span class="progress-info" style="display: none;">Not started</span>
                {% else %}
                  <span class="progress-info" style="display: none;">Started</span>
                {% endif %}
            {% endif %}
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>