<div class="card" categories="{% for category in course.categories %}{{category.name}},{% endfor %}" progress="{% if course.progress > 0 and course.progress < 100 %}In progress{% elsif course.progress == 100 %}Completed{% else %}Not started{% endif %}">
<div class="card-container">
  <img
    class="card-image"
    alt="{{ course.name }}"
    src="{{ course.image_url }}"
  >
  <div class="card-content">
    <div class="card-content-title">
      {{ course.name }}
    </div>
    <div class="card-content-footer">
      {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
      {% if course.has_to_restart? %}
        {% include "course_version_outdated_popup", path: course_path %}
      {% endif %}
      
      <a class="card-btn dark-btn lang-en" {% if course.enrolled? %}href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"{% else %}href="{{ course_path }}"{% endif %}>
        Watch now
      </a>
    <a class="card-btn dark-btn lang-de" {% if course.enrolled? %}href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"{% else %}href="{{ course_path }}"{% endif %}>
      Jetzt anschauen
    </a>
    </div>
  </div>
</div>
</div>
