{% assign activity_count = 0 %}
{% for section in course.sections %}
{% assign activity_count = activity_count | plus: section.activities.size %}
{% endfor %}
<div class="np-card">
  <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 }}"
    >
    {% assign totduration = course.properties.duration %}
    {% assign strduration = "" %}
        {% if totduration >= 60  %}
          {% assign hour = totduration  | divided_by: 60 %}
          {% assign hourfloat = totduration | times: 1.0  | divided_by: 60 %}
          {% assign min = hourfloat  | minus: hour %}
          {% assign min =  min | times: 60 %}
          {% assign min =  min | floor %}
          {% if hour == 1 and min > 0 %}
              {% assign strduration  = hour |  append: ' hour ' |  append: min | append: " mins"  %} 
          {%  elsif hour > 1 and min > 0 %}   
              {% assign strduration  = hour |  append: ' hours ' |  append: min | append: " mins"  %} 
          {%  elsif hour > 1 and min <= 0  %}   
              {% assign strduration  = hour |  append: ' hours' %} 
          {%  elsif hour == 1 and min <= 0  %}   
                {% assign strduration  = hour |  append: ' hour' %}   
          {% endif %}
        {% elsif totduration > 0 %}  
          {% assign strduration  = totduration | append: " mins"  %} 
        {% endif %} 
    <div class="card-activity-duration" >
      <div >{{ activity_count }}<br><span class="activity-label">Activities</span></div>
      {% if strduration != ""  %}
        <div >{{ strduration }}<br><span class="activity-label">Duration</span></div>
      {% endif %}
    </div>
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <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">
          {% if course.progress > 0 and course.progress < 100 %}
            <div class="circle-progress" style="--percentage:{{ course.progress }}%;"></div> {% t shared.progress, count: course.progress %}
            {% elsif course.progress == 100 %}
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 10px;">
<circle cx="10" cy="10" r="9.9" fill="#202227" stroke="#001A43" stroke-width="0.2"/>
<path d="M14.8965 6.39644C15.0917 6.20118 15.4083 6.20119 15.6036 6.39645C15.7838 6.5767 15.7977 6.86032 15.6451 7.05646L15.6035 7.10356L8.60355 14.1033C8.42331 14.2835 8.13971 14.2973 7.94357 14.1448L7.89646 14.1033L4.39646 10.6036C4.20119 10.4083 4.20118 10.0917 4.39643 9.89646C4.57666 9.71621 4.86028 9.70234 5.05643 9.85484L5.10354 9.89643L8.2495 13.0422L14.8965 6.39644Z" fill="white"/>
</svg> {% t shared.progress, count: course.progress %}
            {% else %}
          {% t shared.progress, count: course.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>