{% assign activities_count = 0 %}
{% for course_section in course.sections %}
  {% for course_activity in course_section.activities %}
    {% assign activities_count = activities_count | plus: 1 %}
  {% endfor %}
{% endfor %} 

{% assign compressed_image_url = "" | append: course.image_url | replace: "resize=width:820,height:500,fit:crop/", "" %}

<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="{{ compressed_image_url }}"
    >
    <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">
          {% t shared.progress, count: course.progress %}
          <div class="np-progress-bar-container">
            <div
              style="width: {{ course.progress }}%"
              class="np-button-background-color np-card-progress-bar">
            </div>
          </div>
        </div>
        {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
        {% if course.has_to_restart? %}
          {% include "course_version_outdated_popup", path: course_path %}
        {% endif %}
        <div class="course-button-container">
          <a class="np-button np-button-wide" href="{{ course_path }}">
            {% t shared.view %}
          </a>
          <span>
            {{ activities_count }} {% if activities_count == 1 %}Activity{% else %}Activities{% endif %}
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
