{% assign activities_count = 0 %}
{% for section in course.sections %}
  {% assign activities_count = activities_count | plus: section.activities.size %}
{% endfor %}
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
{% assign scaled_image_url = "" | append: course.image_url | replace: "resize=width:819,height:503", "resize=width:912,height:503" %}

<div class="course-card col-xs-12 col-sm-6 col-lg-4" language="{{course.properties.course_language}}" item-categories="{{ course.categories | map: 'id' |  join: " " }}">
  <a class="course-card-wrapper" href="{{ course_path }}">
    {% if course.ribbon and course.ribbon.size > 0 %}
      {% assign course_ribbon_uppercase = course.ribbon | upcase %}
      <div class="course-card-ribbon body-xs {% if course_ribbon_uppercase == 'NEW' %}ribbon-blue{% endif %}">
        {{ course.ribbon }}
      </div>
    {% endif %}
    <img class="course-card-image" src="{{ scaled_image_url }}" alt="{{ course.name }}">
    <div class="course-card-content">
      <div class="course-card-info body-xs">
        {{ activities_count }}
        {% if activities_count == 1 %}
          <span class="lang-en">lesson</span>
          <span class="lang-de">Lektion</span>
          <span class="lang-es">lección</span>
          <span class="lang-fr">leçon</span>
          <span class="lang-br">lição</span>
        {% else %}
          <span class="lang-en">lessons</span>
          <span class="lang-de">Lektionen</span>
          <span class="lang-es">lecciones</span>
          <span class="lang-fr">leçons</span>
          <span class="lang-br">lições</span>
        {% endif %}
        <span class="course-card-info-separator">|</span>
        {% if course.properties.course_time != 'NULL' %}
          {{ course.properties.course_time }}
        {% endif %}
      </div>
      <h5 class="course-card-title">
        {{ course.name }}
      </h5>
      <div class="course-card-description">
        {{ course.short_description }}
      </div>
      <div class="course-card-footer">
        {% if course.started? %}
          <div class="course-card-progress">
            <div class="course-card-progress-value body-s strong">
              {{ course.progress }}%
            </div>
            <div class="course-card-progress-bar">
              <div class="course-card-progress-bar-fill" style="width: {{ course.progress }}%"></div>
            </div>
          </div>
        {% endif %}
        <div class="course-card-button button-wrapper">
          <div class="button-2 button-medium">
            {% if course.started? %}
              <span class="lang-en">Continue</span>
              <span class="lang-de">Weiter</span>
              <span class="lang-es">Continuar</span>
              <span class="lang-fr">Continuer</span>
              <span class="lang-br">Continuar</span>
            {% else %}
              <span class="lang-en">Take this course</span>
              <span class="lang-de">Diesen Kurs belegen</span>
              <span class="lang-es">Tomar este curso</span>
              <span class="lang-fr">Suivre ce cours</span>
              <span class="lang-br">Faça este curso</span>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </a>
</div>