<div class="card" type='course' categories="{%for category in course.categories%}{{category.name}},{%endfor%}" duration="{{course.properties.course_duration}}">
  <div class="card-image-container">
    <img
      class="np-card-image"
      alt="{{ course.name }}"
      src="{{ course.image_url }}"
    >
  </div>
  <div class="card-content-container">
    <h3 class="card-content-title chubb">
      {{ course.name }}
    </h3>
    <div class="card-category-wrapper">
      {% for category in course.categories %}
        {% unless category.name == 'Recommended' or category.name == 'Onboarding'%}  
          <span class="card-category lato">{{category.name }}</span>
        {% endunless %}
      {% endfor %}
    </div>
    <div class="card-time">
      {% unless course.properties.course_duration == 0 %}
        {{course.properties.course_duration}} MINUTES
      {% endunless %}
    </div>
    <div class="card-description lato">{{course.short_description}}</div>
    {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
    <div class="card-course-btn-wrapper">
      <a class="np-button np-button-wide lato" href="{{ course_path }}">
        {% if course.enrolled? == false %}
          Enroll
          {% elsif course.enrolled? == true %}
            Launch
          {% elsif course.progress > 0 and course.progress < 100 %}
            Resume
            {% else %}
            {% t shared.view %}   
        {% endif %}
      </a>
    </div>
  </div>
</div>


 

