<div class="np-card course-card" style="padding: 0 !important;">
  <div class="np-card-container">
    <img
      class="np-card-image"
      alt="{{ course.name }}"
      src="{{ course.image_url }}"
    >
    <div class="np-card-content np-card-content-vertical np-card-padding course-card-info">
      <div class="np-flex-1">
        <h3 class="np-card-content-title course-card-title">
          {{ course.name }}
        </h3>
      </div>
      {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
      {% if course.has_to_restart? %}
        {% include "course_version_outdated_popup", path: course_path %}
      {% endif %}
      <a class="np-button np-button-wide course-card-button" href="{{ course_path }}">
      {% if course.progress > 0 and course.progress < 100 %}
        Continue
      {% else %}
        View
      {% endif %}
      {%- comment -%} {% t shared.view %} {%- endcomment -%}
      </a>
    </div>
    <div class="np-progress-bar-container">
      <div
        style="width: {{ course.progress }}%"
        class="np-button-background-color np-card-progress-bar course-card-progress-bar">
      </div>
    </div>
    <div class="card-bottom-details">
      <div class="np-card-content-progress np-button-color">
        {% t shared.progress, count: course.progress %}
      </div>
      <div>
        {{course.properties.course_duration}}
      </div>
    </div>
  </div>
</div>

<style>
  @media screen and (min-width: 768px){
    .course-card-wrapper{
      margin-bottom: 32px;
    }

    .course-card{
      padding: 0 10px !important;
    }
  }
</style>