<div class="np-card np-card-course course-card">
  <div class="np-card-container">
     <img
        class="course-card-image"
        alt="{{ course.name }}"
        src="{{ course.image_url }}"
      >
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <div class="card-info-wrapper">
        <div class="np-card-header-type eyebrow-lg fw-semibold {% if course.progress == 0 %}gray{% endif %}">
          {% if course.progress == 0 %}
            {% t shared.progress, count: course.progress %}
          {% elsif course.progress > 0 and course.progress < 100 %}
            <span>IN PROGRESS</span>
          {% else %}
            <i class="fas fa-check-circle"></i> Completed
          {% endif %}
        </div>
        {% if course.properties.duration != blank %} 
          <div class="course-duration">
          <i class="fal fa-clock"></i>
            {{course.properties.duration}} 
          </div>
        {% endif %}
      </div>
      {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
      <a href="{{ course_path }}">
        <h3 class="np-card-content-title header-5 fw-semibold">
          {{ course.name }}
        </h3>
      </a>
      <div class="paragraph-2">
        {{course.short_description}}
      </div>
      <div class="np-card-content-footer">
      {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
        <a class="fw-semibold" href="{{ course_path }}">
            {% t shared.view %} course
          <i class="far fa-long-arrow-right"></i>
        </a>
      </div>
    </div>
  </div>

  {% for category in course.categories %}
    <span class="course-category np-hidden">{{category.name}}</span>
  {% endfor %}
</div>
