{% 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="recent-course-card" href="{{ course_path }}">
  <img class="recent-course-image" src="{{ course.image_url }}">
  <div class="recent-course-content">
    <div class="recent-course-title">
      {{ course.name }}
    </div>
    <div class="recent-course-footer">
      {% if course.instructors and course.instructors.size > 0 %}
        <div class="recent-course-info">
          <div class="recent-course-info-icon">
            <img src="{{ course.instructors.first.avatar_url }}" />
          </div>
          <div class="recent-course-info-value">
            {{ course.instructors.first.name }}
          </div>
        </div>
      {% endif %}
      <div class="recent-course-info">
        <div class="recent-course-info-icon">
          <i class="fal fa-file-alt"></i>
        </div>
        <div class="recent-course-info-value">
          {{ activites_count }} lessons
        </div>
      </div>
      <div class="recent-course-info">
        <div class="recent-course-info-icon">
          <i class="fal fa-clock"></i>
        </div>
        <div class="recent-course-info-value">
          {{ course.properties.course_time | divided_by: 60 }}h {{ course.properties.course_time | modulo: 60 }}m
        </div>
      </div>
    </div>
  </div>
</a>