{% assign activities_count = 0 %}
{% for section in course.sections %}
  {% assign activities_count = activities_count |  plus: section.activities.size  %}
{% endfor %}

<a class="homepage-card-wrapper" language="{{course.properties.course_language}}" href="{% route course, id: course.id %}">
  <div class="homepage-card">
    <img class="homepage-card-image" src="{{ course.image_url }}" alt="{{ course.name }}">
    <div class="homepage-card-body-wrapper">
      {% unless course.ribbon == "VIDEO" %}
        <div class="homepage-card-activities body-s">
          {{ 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 %}
        </div>
      {% endunless %}
      <div class="homepage-card-body">
        <div class="homepage-card-body-left">
          <div class="homepage-card-title strong">
            {{ course.name }}
          </div>
        </div>
        <div class="homepage-card-button button-2 button-medium">
          {% if course.ribbon != "VIDEO" %}
            {% if course.started? %}
              <span class="lang-en">Continue</span>
              <span class="lang-de">Weiter</span>
              <span class="lang-es">Continúe en</span>
              <span class="lang-fr">Continuer</span>
              <span class="lang-br">Continuar</span>
            {% else %}
              <span class="lang-en">Start</span>
              <span class="lang-de">Start</span>
              <span class="lang-es">Inicio</span>
              <span class="lang-fr">Commencer</span>
              <span class="lang-br">Início</span>
            {% endif %}
          {% else %}
            <span class="lang-en">Watch video</span>
            <span class="lang-de">Video ansehen</span>
            <span class="lang-es">Ver el vídeo</span>
            <span class="lang-fr">Regarder la vidéo</span>
            <span class="lang-br">Assista ao vídeo</span>
          {% endif %}
        </div>
      </div>
      <div class="homepage-card-footer">
        <div class="homepage-card-info">
          {% unless course.ribbon == "VIDEO" %}
            <div class="homepage-card-progress-value body-s strong">
              {{ course.progress }}%
            </div>
          {% endunless %}
          <div class="homepage-card-time body-s">
            <span class="lang-en">Total length</span>
            <span class="lang-de">Gesamtlänge</span>
            <span class="lang-es">Longitud total</span>
            <span class="lang-fr">Durée totale</span>
            <span class="lang-br">Duração total</span>: {{ course.properties.course_time }}
          </div>
        </div>
        {% unless course.ribbon == "VIDEO" %}
          <div class="homepage-card-progress-bar">
            <div class="homepage-card-progress-bar-fill" style="width: {{ course.progress }}%;"></div>
          </div>
        {% endunless %}
      </div>
    </div>
  </div>
</a>
