{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<a href="{{course_path}}" class="np-card np-card-ongoing">
  <div class="np-card-container">
    <div class="np-image-wrapper">
      {% if course.ribbon %}
        <div class="np-card-ribbon">
          {{ course.ribbon }}
        </div>
      {% endif %}
      <div class="course-img-content">
        <h3 class="np-card-content-title">
          {{ course.name }}
        </h3>
      </div>
      <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">
      <div class="np-card-content-subtitle">
        {{ course.short_description }}
      </div>
      <div class="np-card-content-footer">
        <div class="np-card-content-progress np-button-color">
          {% t shared.progress, count: course.progress %}
        </div>
        <div class="np-card-progress-bar-container">
          <div style="width: {{ course.progress }}%" class="np-button-background-color np-card-progress-bar">
          </div>
        </div>
      </div>
    </div>
  </div>
</a>
