<div class="np-card">
    <div class="np-card-container">
        <div class="np-card-image-content-top">
            {% if course.ribbon %}
              <div class="np-card-ribbon">
                {{ course.ribbon }}
              </div>
            {% endif %}
            <h3 class="np-card-content-title np-color-white">
                {{ course.name }}
            </h3>
            <div class="np-card-content-subtitle np-color-white">
              {{ course.instructor_names }}
            </div>
        </div>
        <img
          class="np-card-image"
          alt="{{ course.name }}"
          src="{{ course.image_url }}"
        >
        <div class="np-card-image-content-bottom">
            <div class="np-card-content-progress np-button-color">
              {% t shared.progress, count: course.progress %}
            </div> 
        </div>
      </div>
   
      <div class="np-card-content np-card-content-vertical np-card-padding">
          {% include "course_details" %}
        <div class="np-card-content-footer">
            {% 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-top-button np-button-font-color np-button np-button-big" href="{% route course_enrollment, code: course.enrollment_code %}"          
              >
                {% if course.enrolled? == false %}
                  {% t shared.enroll %}
                {% elsif course.started? == false %}
                  {% t shared.start, key: current_school.course_vocabulary %}
                {% elsif course.completed? %}
                  {% t shared.course.view, key: current_school.course_vocabulary %}
                {% else %}
                  {% t shared.continue %}
                {% endif %}
            </a>

        </div>
    </div>
</div>
