<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 %}
            {% comment %}<h3 class="np-card-content-title np-color-white">{% endcomment %}
        </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;'>
        <h3 class="np-card-content-title">
          {{ course.name }}
        </h3>

        {% include "course_details_review" %}
        <div class="np-card-content-footer">
          <div class="np-card-content-progress np-button-color" style='color: #2c4265; font-size: 14px; font-weight: 600; margin-right: 1rem'>
            {% 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 %}

            {% comment %}<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;'         
              >{% endcomment %}

            <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(45deg, #2c4265 0%, #34abe2 100%); border-radius: 8px; width: 40%;'         
              >
                {% 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>

<style>
  .fas.fa-star {
      line-height: 1.15;
  }
  .course-card-content {
    border-radius: 0 0 8px 8px;
    height: 15rem;
    text-align: center;
  }
  /* .np-card-content-title {
    text-shadow: 1px 1px #34abe2;
  } */
</style>