{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
<div class="course-card-container" onclick="location.href='{{ course_path }}'">
  <div class="course-card">
    <a href="{{ course_path }}" class="course-image">
      <img
        height="1024"
        width="386"
        alt="{{ course.name }}"
        src="{{ course.image_url }}"
      >
    </a>

    <p class="course-categories-container">
      {% if course.categories %}
        {% for course_category in course.categories %}
          <a href="{{ course_path }}" class="course-category">
            {{ course_category.name }}
          </a>
        {% endfor %}
      {% endif %}
    </p>

    <h6 class="course-name">
      <a href="{{ course_path }}">
        {{ course.name }}
      </a>
    </h6>

    <p>{{ course.short_description }}</p>
  </div>
</div>

