{% capture course_path %}
  {% route course, id: course.id %}
{% endcapture %}
<div class="np-card course-card" categories="{%for category in course.categories%}{{category.name}}[$]{%endfor%}">
  <div class="np-card-container">
    <div class="np-progress-bar-container">
      <div style="width: {{ course.progress }}%" class="np-card-progress-bar"></div>
    </div>
    <div class="course-info-wrapper">
      <div class="course-info">
        <div class="course-level">{{ course.properties.course_level }}</div>
        {% unless course.properties.course_length == 0 %}
          <div class="course-length">{{ course.properties.course_length }} minutes</div>
        {% endunless %}
      </div>
    </div>
    <img
      class="np-card-image"
      alt="{{ course.name }}"
      src="{{ course.image_url }}">
    <div class="np-card-content np-card-content-vertical">
      <a class="np-card-content-title" href="{{course_path}}">
        {{ course.name }}
      </a>
      <div class="np-card-content-desc">
        {{ course.short_description }}
      </div>
      <div class="np-card-content-footer">
        <div class="instructors-wrapper">
        {% for instructor in course.instructors %}
          <div class="np-content-instructors-content-item">
            <img
              src="{{ instructor.avatar_url }}"
              class="np-content-instructors-content-image"
              alt="{{ instructor.name }}" />
            <div class="np-content-instructors-content-description">
              <div class="np-content-instructors-content-name">
                {{ instructor.name }}
              </div>
            </div>
          </div>
        {% endfor %}
</div>
        {% if course.has_to_restart? %}
          {% include "course_version_outdated_popup", path: course_path %}
        {% endif %}
        <a class="np-button np-button-wide" href="{{ course_path }}">
          {% t shared.view %} course
        </a>
      </div>
    </div>
  </div>
</div>