{% load i18n %}
<div class="col mb-3">
  <div class="card shadow-sm">
    <div class="card-img-top bg-primary embed-responsive embed-responsive-16by9" style="background:url({% if course.banner %}{{ course.banner.url }}{% else %}https://picsum.photos/seed/{{course.id}}/320/180{% endif %}) center center;background-size: cover"></div>
    <div class="card-body">
      <h3 class="card-title font-weight-light text-truncate" title="{{ course.title }}">{{ course.title }}</h3>
      <div class="progress bg-light" style="height: 8px;">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
      </div>

      <p class="card-text text-justify">
        <small class="text-muted d-block mb-2">Last updated 3 mins ago</small>
        {{ course.description }}
      </p>
      <a href="{% url "course_app:details" course.slug %}" class="btn btn-primary stretched-link">
        {% if course.user_progress %}
          {% blocktrans with progress=course.user_progress|stringformat:".0f" %}Continue learning ({{ progress }}% completed){% endblocktrans %}
        {% else %}
          {% trans "Enroll" %}
        {% endif %}
      </a>

    </div>
  </div>
</div>