{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% assign activites_count = 0 %}
{% for section in course.sections %}
  {% assign activites_count = activites_count | plus: section.activities.size %}
{% endfor %}
<a class="dashboard-course" categories="{{ course.categories | map: 'id' | join: ' ' }}"  href="{{ course_path }}">
  <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 }}"
    >
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <div class="dashboard-course-rating">
        <div class="dashboard-course-rating-value">
          {{ course.properties.np_course_rating }}
        </div>
        <div class="dashboard-course-rating-stars">
          {% for i in (1..5) %}
            {% if course.properties.np_course_rating >= i %}
              <i class="fas fa-star"></i>
            {% else %}
              <i class="fal fa-star"></i>
            {% endif %}
          {% endfor %}
        </div>
        <div class="dashboard-course-rating-count">
          ({{ course.properties.np_course_rating_count }})
        </div>
      </div>
      <h3 class="np-card-content-title">
        {{ course.name }}
      </h3>
      <div class="dashboard-course-info-section">
        <div class="dashboard-course-info">
          <i class="fal fa-file-alt"></i>
          {% if activites_count > 1 %}
            {{ activites_count }} lessons
          {% else %}
           {{ activites_count }} lesson
          {% endif %}
         
        </div>
        <div class="dashboard-course-info">
          <i class="fal fa-clock"></i>
          {{ course.properties.course_time | divided_by: 60 }}h {{ course.properties.course_time | modulo: 60 }}m
        </div>
        <div class="dashboard-course-info">
          <i class="fal fa-signal-3"></i>
          {{ course.properties.course_difficulty }}
        </div>

      </div>
      <div class="dashboard-course-footer">
        {% if course.instructors.size != 0 %}
          <div class="dashboard-course-instructor">
            <img class="dashboard-course-instructor-image" src="{{ course.instructors.first.avatar_url }}">
            <div class="dashboard-course-instructor-name">
              {{ course.instructors.first.name }}
            </div>
          </div>
        {% endif %}
      </div>
      {% if course.has_to_restart? %}
        {% include "course_version_outdated_popup", path: course_path %}
      {% endif %}
    </div>
  </div>
</a>