<div class="np-continue-card">
  <div class="np-card-container np-continuing-card-container">
    {% if course.ribbon %}
      <div class="np-card-ribbon">
        {{ course.ribbon }}
      </div>
    {% endif %}
    <img
      class="np-continuing-card-image"
      alt="{{ course.name }}"
      src="{{ course.image_url }}"
    >
    <div class="np-continuing-card-content np-card-content-vertical">
      <h3 class="np-continuing-card-content-title">
        {{ course.name }}
      </h3>

      {% 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 continue-course-button" href="{{ course_path }}">
        Resume Course
      </a>
      <br></br>

      <div class="np-top-cta-progress-content">
        <div class="np-progress-bar-container">
            <div
            style="background: #175C62; width: {{ course.progress }}%"
            class="np-card-progress-bar">
            
            </div>
        </div>
        <div class="np-top-cta-progress-text" style="color: #175C62; float: right;">
            {% t shared.progress, count: course.progress %}
        </div>
      </div>
    </div>
  </div>
</div>
