<div class="np-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.name }}
        </h3>
        <div class="np-card-content-subtitle">
          {{ course.instructor_names }}
        </div>
        <div class="np-card-content-footer">
          <div class="np-card-content-progress np-button-color">
            {% t shared.progress, count: course.progress %}
          </div>
          {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
          {% if course.has_to_restart? %}
            {% include "course_version_outdated_popup", path: course_path %}
          {% endif %}
          {% if course.learner_can_retake? %}
            <form action="{% route course_retake, id: course.id %}" method="POST">
              {% form_authenticity_token %}
              <button type="submit" class="np-button np-button-wide">
                Retake Course
              </button>
            </form>
          {% else %}
            <a
                class="np-button np-button-wide"
            {% if course.enrolled? %}
                href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
            {% else %}
                href="{% route course_enrollment, code: course.enrollment_code %}"
            {% endif %}
            >
              {% if course.enrolled? == false %}
                {% t shared.enroll %}
              {% elsif course.started? == false %}
                {% t shared.course.start, key: current_school.course_vocabulary %}
              {% elsif course.completed? %}
                {% t shared.course.view, key: current_school.course_vocabulary %}
              {% else %}
                {% t shared.continue %}
              {% endif %}
            </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  