{% 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 %} 

{%- comment -%} <h3 class="np-card-content-title">
    {{ course.name }}
</h3> {%- endcomment -%}

<div class="np-course-details">
    <div class="np-course-detail">                 
        <strong>{{ activities_count }}</strong>
        <span class="np-details-label">
          {% if activities_count == 1 %}Activity{% else %}Activities{% endif %}
        </span>
    </div>
    <div class="np-course-detail">
      {% if course.properties.course_duration contains 'missing property' %}
        missing property: course.properties.course_duration
      {% else %}
        {% if course.properties.course_duration > 0 %}
          {% if course.properties.course_duration > 59 %}

            {% assign course_hours = course.properties.course_duration | divided_by: 60 %}
            {% assign course_minutes = course.properties.course_duration | modulo: 60 %}

            <strong>{{ course_hours }}{% if course_minutes > 0 %}:{{ course_minutes }}</strong>{% endif %} Hr

          {% else %}

            <strong>{{ course.properties.course_duration }}</strong> Min{% if course.properties.course_duration > 1 %}s{% endif %}

          {% endif %}
          <span class="np-details-label">Duration</span>
        {% endif %}
      {% endif %}
    </div>
    <div class="np-course-detail np-card-content-progress np-button-color">
      {{ course.progress }}%
      <span class="np-details-label">Progress</span>
    </div> 
</div>

<style>
  .course-detail-rating {
    align-self: flex-end;
  }
  .course-detail-rating-stars {
    margin-bottom: 5px;
  }
  @media screen and (max-width: 768px) {
    .course-detail-rating-stars {
      margin-bottom: 0;
    }
  }
</style>