<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">
    {% comment %} <img
      class="card-image"
      alt="{{ course.name }}"
      src="{{ course.image_url }}"
    > {% endcomment %}
    <div class="image-container" style="position: relative;">
      <img class="card-image"
      alt="{{ course.name }}"
      src="{{ course.image_url }}">
      {% if course.ribbon %}
        <div class="np-card-ribbon">
          {{course.ribbon}}
        </div>
      {% endif %}
    </div>
    <div class="card-content">
      <div class="card-details">
        <div class="card-detail course-lessons lang-en">
          {{course.activities_count}} lessons
        </div>
        <div class="card-detail course-lessons lang-de">
          {{course.activities_count}} Lektionen
        </div>
        <div class="card-detail course-lessons lang-jp">
          {{course.activities_count}} レッスン
        </div>
        <div class="card-detail course-lessons lang-fr">
          {{course.activities_count}} leçons
        </div>
        <div class="card-detail course-time lang-en">
          {{course.properties.course_time}} minutes
        </div>
        <div class="card-detail course-time lang-de">
          {{course.properties.course_time}} minuten
        </div>
        <div class="card-detail course-time lang-fr">
          {{course.properties.course_time}} minutes
        </div>
        <div class="card-detail course-time lang-jp">
          {{course.properties.course_time}} 分
        </div>
      </div>
      <div class="card-content-title">
        {{ course.name }}
      </div>
      <div class="course-content-desc">
        {{ course.short_description }}
      </div>
      <div class="course-progress-container">
        <div class="progress-number">{{course.progress}}%</div>
        <div class="course-progress">
          <span class="course-progress-bar" style="width: {{course.progress}}%;"></span>
        </div>
      </div>
      <div class="card-content-footer">
        {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
        <a class="card-btn dark-btn lang-en" href="{{ course_path }}">
          {% if course.progress == 0 %}
            Get started
            {% else %} 
              Continue
          {% endif %}
        </a>
        <a class="card-btn dark-btn lang-de" href="{{ course_path }}">
          {% if course.progress == 0 %}
            Starten
            {% else %} 
            Weiter
          {% endif %}
        </a>
         <a class="card-btn dark-btn lang-fr" href="{{ course_path }}">
          {% if course.progress == 0 %}
            Commencer
            {% else %} 
              Continue
          {% endif %}
        </a>
         <a class="card-btn dark-btn lang-jp" href="{{ course_path }}">
          {% if course.progress == 0 %}
            開始する
            {% else %} 
              続ける
          {% endif %}
        </a>
      </div>
    </div>
  </div>
</div>
