<div
  class="catalog-card"
  priority="{{ course.properties.priority }}"
  category="{% for category in course.categories %}{{ category.name }}{% unless forloop.last %},{% endunless %}{% endfor %}">
  <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 flex-1">
      <div class="np-card-content-subtitle">
        <i class="fas fa-star" style="color: #ffc445;"></i>
        {{ course.properties.course_rating | round: 1 }}
      </div>
      <h3 class="np-card-content-title">
        {{ course.name }}
      </h3>
      <div class="np-card-content-subtitle flex-1">
        <i class="fas fa-clock"></i>
        {{ course.properties.course_duration }}
      </div>
      <div class="lp-footer-placeholder"></div>

      <div class="np-card-content-footer">
        <div
          class="np-card-content-progress"
          {% if course.progress == 100 %}
          style="color: #0AAD0A;"
          {% endif %}>
          <span class="lang-en">
            {% t shared.progress
              , count: course.progress %}
          </span>
          <span class="lang-es">
            {% if course.progress == 100 %}
              Completado
            {% else if learning_path.progress > 0 and learning_path.progress < 100 %}
              En progreso
            {% else %}
              No iniciado
            {% endif %}
          </span>
        </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 course.progress == 0 %}
            <span class="lang-en">Start</span>
            <span class="lang-es">Comenzar</span>
          {% else if course.progress >0 and course.progress < 100 %}
            <span class="lang-en">Continue</span>
            <span class="lang-es">Continuar</span>
          {% else %}
            <span class="lang-en">{% t shared.view %}</span>
            <span class="lang-es">Ver</span>
          {% endif %}
        </a>
      </div>
    </div>
  </div>
</div>