<div class="np-card">
  <div class="np-card-container">
    <div class="np-image-wrapper">
      {% if course.ribbon %}
        <div class="np-card-ribbon">
          {{ course.ribbon }}
        </div>
      {% endif %}
      <div class="course-img-content">
        <h3 class="np-card-content-title">
          {{ course.name }}
        </h3>
        {% comment %} {% if course.properties.course_length %}
          <div class="course-length">{{course.properties.course_length}}</div>
        {% endif %} {% 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">
      {% if course.short_description != "" %}
        <div class="np-card-content-subtitle">
          {{ course.short_description }}
          {% if course.properties.course_length %}
            <div class="course-length">{{course.properties.course_length}}</div>
          {% endif %}
        </div>

      {% else %}
        <div></div>
      {% endif %}
      <div class="np-card-content-footer">
        <div class="np-card-content-progress np-button-color">
		  {% if current_person.properties.language == "en" %}
			{% if course.progress > 0 and course.progress < 100 %}
			  {{course.progress }}% Complete
			{% elsif course.progress == 100 %}
			  {{course.progress }}% Complete
			{% else %}
			  Not Started
			{% endif %}
		  {% elsif current_person.properties.language == "es" %}
			{% if course.progress > 0 and course.progress < 100 %}
			  {{course.progress }}% Completo
			{% elsif course.progress == 100 %}
			  {{course.progress }}% Completo
			{% else %}
			  No empezado
			{% endif %}
			{% endif %}

        </div>
        {% 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" href="{{ course_path }}">
		  {% if current_person.properties.language == "en" %}
			{% if course.progress > 0 and course.progress < 100 %}
			  Continue
			{% elsif course.progress == 100 %}
			  Retake
			{% else %}
			  View
			{% endif %}
		  {% elsif current_person.properties.language == "es" %}
			{% if course.progress > 0 and course.progress < 100 %}
			  Continuar
			{% elsif course.progress == 100 %}
			  Repetir
			{% else %}
			  Vista
			{% endif %}
		  {% endif %}

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