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

<div class="np-course-details" style="text-align: center; ">
    <div class="np-course-detail" id='hideable'>                 
        <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_length contains 'missing property' %}
        missing property: course.properties.course_length
      {% else %}
        {% if course.properties.course_length %}
          {% if course.properties.course_length > 0 %}
              <strong>{{course.properties.course_length}}</strong> mins<span class="np-details-label">Duration</span>
          {% else %}
              <div>&nbsp;&nbsp;&nbsp;</div>
          {% endif %}
        {% endif %}
      {% endif %}
    </div>
    {% comment %}<div class="np-course-detail course-detail-rating">
      <div class='course-detail-rating-stars' style='display: flex; flex-wrap: nowrap;'>
        {% for i in (1..5) %}
          {% if course.properties.course_rating >= i %}
            <svg width="20" height="19" viewBox="0 0 20 19" preserveAspectRatio fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
            </svg>  
          {% else %}
            <svg width="20" height="19" viewBox="0 0 20 19" preserveAspectRatio fill="none" xmlns="http://www.w3.org/2000/svg">
              <path opacity="0.25" d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
            </svg>
          {% endif %}
        {% endfor %}
      </div>
      <span class="np-details-label" style= 'display: flex;'>
        {{course.properties.course_rating}} <div style='font-weight: 500; padding-left: 5px; color: #2c4265;'>({{course.properties.course_rating_count}}) </div>
      </span>
    </div>{% endcomment %}
</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>