{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% assign course_categories = course.categories | map: 'name' %}
{% assign encoded_categories = '' %}
{% for cat in course_categories %}
  {% assign encoded_cat = cat | url_encode %}
  {% assign encoded_categories = encoded_categories | append: ' ' | append: encoded_cat %}
{% endfor %}
<div class="course-card-wrapper col-xl-4 col-md-6 col-12" course-card-categories="{{ encoded_categories }}">
  <div class="course-card">
    <img class="course-card-image" alt="{{ course.name }}" src="{{ course.image_url }}">
    <div class="course-card-content">
      <div class="course-card-content-title">
        {{ course.name }}
      </div>
      <div class="course-card-content-description">
        {{ course.short_description }}
      </div>
      <a class="course-card-content-button" href="{{ course_path }}">
        View Course
      </a>
      {% if course.has_to_restart? %}
        {% include "course_version_outdated_popup", path: course_path %}
      {% endif %}
    </div>
  </div>
</div>