<div class="np-card" categories="{% for category in course.categories %}{{category.name}}${% 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 }}"
    >
    {% if course.properties.duration %}
      <div class="np-duration-overlay">
      <strong>{{ course.properties.duration }}</strong> mins
      <div></div>
      </div>
  {% endif %}
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <div class="np-duration">
        {{ course.activities_count }} Activities
      </div>
      <h3 class="np-card-content-title">
        {{ course.name }}
      </h3>
      <div class="np-card-content-subtitle">
        {{ course.instructor_names }}
      </div>
      <div class="np-card-content-footer">
        <div class="np-card-content-progress np-button-color">
          {{course.progress}}%
          {% if course.progress == 100 %}
            Complete
            {% elsif course.progress == 0 %}
            Not started 
            {% else %}
            In progress
          {% 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 }}">
          {% t shared.view %}
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  .np-duration{
    font-weight: 600;
  }

  .np-duration-overlay{
    position: absolute;
    top: 10px;
    left: 10px;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    background-color: #010063;
}

.np-duration-label{
  font-size: 15px;
}
</style>