{% 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 video-card col-xs-12 col-sm-6 col-lg-4" language="{{course.properties.course_language}}">
  <a class="course-card-wrapper" href="{{ course_path }}">
    {% if course.properties.course_time != 'NULL' %}
      <div class="video-card-ribbon">
        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M8 15.5C11.866 15.5 15 12.366 15 8.5C15 4.63401 11.866 1.5 8 1.5C4.13401 1.5 1 4.63401 1 8.5C1 12.366 4.13401 15.5 8 15.5ZM16 8.5C16 12.9183 12.4183 16.5 8 16.5C3.58172 16.5 0 12.9183 0 8.5C0 4.08172 3.58172 0.5 8 0.5C12.4183 0.5 16 4.08172 16 8.5ZM6 4C6.27614 4 6.5 4.22386 6.5 4.5V11.6L11.0982 8.73891L7.5 6C7.27496 5.83997 7.22225 5.5278 7.38228 5.30276C7.54232 5.07772 7.85448 5.02501 8.07952 5.18504L12.2898 8.35919C12.4261 8.45614 12.5049 8.61484 12.4998 8.78205C12.4946 8.94926 12.4062 9.10282 12.2642 9.19119L6.26415 12.9245C6.10998 13.0205 5.91591 13.0253 5.75718 12.9371C5.59845 12.8489 5.5 12.6816 5.5 12.5V4.5C5.5 4.22386 5.72386 4 6 4Z" fill="white"/>
        </svg>
        <div class="video-card-ribbon-text  body-s">
          {{ course.properties.course_time }}
        </div>
      </div>
    {% endif %}
    <img class="course-card-image" src="{{ scaled_image_url }}" alt="{{ course.name }}">
    <div class="course-card-content">
      <h5 class="course-card-title">
        {{ course.name }}
      </h5>
      <div class="course-card-description">
        {{ course.short_description }}
      </div>
      
      <div class="course-card-footer">
        <div class="course-card-button button-wrapper">
          <div class="button-2 button-medium">
            <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>
          </div>
        </div>
      </div>
    </div>
  </a>
</div>