{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<div
  class="catalog-card"
  priority="{{ course.properties.priority }}"
  category="{% for category in course.categories %}{{ category.name }}{% unless forloop.last %},{% endunless %}{% endfor %}">
  <a class="minified-card-container" href="{{ course_path }}">
    <div class="minified-card-image-container minified-card-padding">
      <div class="minified-card-image-container-image" style="background-image: url({{ course.image_url }})"></div>
      <div class="np-card-content-subtitle">
        <i class="fas fa-clock"></i>
        {{ course.properties.course_duration }}
      </div>
    </div>
    <div class="np-card-content np-card-content-vertical minified-card-padding flex-1">
      <div class="np-card-content-subtitle">
        <i class="fas fa-star" style="color: #ffc445;"></i>
        {% if course.properties.course_rating and course.properties.course_rating != 0 %}
          {{ course.properties.course_rating | round: 1 }}
        {% else %}
          -
        {% endif %}
      </div>
      <div class="np-card-content-title flex-1">
        {{ course.name }}
      </div>
      <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
          {% elsif course.progress > 0 and course.progress < 100 %}
            En progreso
          {% else %}
            No iniciado
          {% endif %}
        </span>
      </div>
    </div>
  </a>
</div>