<a class="np-card" href="{% route course_enrollment, code: course.enrollment_code %}">
  <div class="np-card-container">
    {% if course.ribbon %}
      <div class="np-card-ribbon">
        {{ course.ribbon }}
      </div>
    {% endif %}
      <video class='left-video' autoplay muted loop>
                  <source src="{{course.promo_video_embed_url}}" type="video/mp4" alt="{{ course.name }}">
              </video>
    <div class="np-card-content-bottom">
      <h3 class="np-card-content-title np-color-white">
        {{ course.name }}
      </h3>
      <div class='np-card-content-description'>
        {{ course.full_description }}
      </div>
    
      <div class="np-card-content-progress np-button-color">
        {% t shared.progress, count: course.progress %}
      </div> 
      <div class="np-card-content-category">
        {{course.categories.first.name}}
      </div>
    </div>
  </div>
</a>
<style>
  .np-card {
    text-decoration: none;
    color: white;
  }
  .np-card-content-category {
    border-top: 1px solid lightgray;
    padding: 10px;
  }
  .np-card-content-description {
    display: block;
    color: lightgray;
  }
  .np-card-content-bottom {
    padding: 15px;
  }
  .np-button-color {
    color: lightslategray;
    font-size: 15px;
    padding-bottom: 10px;
  }
</style>
