<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">
  <div class="image-container" style="position: relative;">
      <img class="card-image"
      alt="{{ course.name }}"
      src="{{ course.image_url }}">
      {% if course.ribbon %}
        <div class="sl-card-ribbon">
          {{course.ribbon}}
        </div>
      {% endif %}
    </div>

  <div class="card-content">
    <div class="card-details">
      <div class="card-detail course-lessons">
        {% for category in course.categories %}
            {% if category.name == 'PDF' %}
                PDF
            {% elsif category.name == 'Video'  %} 
                Video
            {% endif %}
        {% endfor %}
      </div>
      <div class="card-detail course-time">
        <div class="text lang-en">{{course.properties.course_time}} minutes</div>
        <div class="text lang-de">{{course.properties.course_time}} Minuten</div>
        <div class="text lang-fr">{{course.properties.course_time}} minutes</div>
        <div class="text lang-jp">{{course.properties.course_time}} 分</div>
        
      </div>
    </div>
    <div class="card-content-title">
      {{ course.name }}
    </div>

    <div class="card-content-footer">
      {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
      <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 %}>
        {% for category in course.categories %}
          {% if category.name == 'PDF' %}
              Read now
          {% elsif category.name == 'Video'  %} 
              Watch now
          {% endif %}
      {% endfor %}
      </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 %}>
        {% for category in course.categories %}
          {% if category.name == 'PDF' %}
            Jetzt lesen
          {% elsif category.name == 'Video'  %} 
            Jetzt anschauen
          {% endif %}
      {% endfor %}
      </a>
      <a class="card-btn dark-btn lang-fr" 
      {% if course.enrolled? %}
        href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
      {% else %}
        href="{{ course_path }}"
      {% endif %}>
        {% for category in course.categories %}
          {% if category.name == 'PDF' %}
           Lire
          {% elsif category.name == 'Video'  %} 
           Visionner
          {% endif %}
      {% endfor %}
      </a>
      <a class="card-btn dark-btn lang-jp" 
      {% if course.enrolled? %}
        href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
      {% else %}
        href="{{ course_path }}"
      {% endif %}>
        {% for category in course.categories %}
          {% if category.name == 'PDF' %}
            今すぐ読む
          {% elsif category.name == 'Video'  %} 
            今すぐ視聴
          {% endif %}
      {% endfor %}
      </a>
    </div>
  </div>
</div>
</div>
