<div class="np-card">
    <div class="np-card-container">
        <div class="np-card-image-content-top" style="top: 0.75rem; left: 0.75rem">
            {% 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-progress np-button-color" style='color: white; font-size: 14px; font-weight: 600;'>
              {% t shared.progress, count: course.progress %}
            </div> 
        </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 course-card-content" style='padding: 1.5rem;'>
          {% include "course_details_review" %}
        <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 %}" 
              style='background: linear-gradient(90deg, #089FB7 0%, #15824B 100%); border-radius: 8px;'         
              >
                {% if course.enrolled? == false %}
                <span class="lang-en">{% t shared.enroll %}</span>
                <span class="lang-es">Inscríbase</span>
                {% elsif course.started? == false %}
                  <span class="lang-en">{% t shared.start, key: current_school.course_vocabulary %}</span>
                  <span class="lang-es">Inicie</span>
                {% elsif course.completed? %}
                  <span class="lang-en">{% t shared.course.view, key: current_school.course_vocabulary %}</span>
                  <span class="lang-es">Ver el curso</span>
                {% else %}
                  <span class="lang-en">{% t shared.continue %}</span>
                  <span class="lang-es">Continuar</span>
                {% endif %}
            </a>

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

<style>
  .fas.fa-star {
      line-height: 1.15;
  }
  .course-card-content {
    border-radius: 0 0 8px 8px;
  }
  .np-card-content-title {
    text-shadow: 1px 1px black;
  }
</style>