<div class="np-card np-no-horizontal-padding">
  <div class="np-card-container">
    <div class="np-learning-path np-featured-course">
      <div class="np-featured-course-img-container">
          <div class="np-card-image-content-top">           
              {% include "course_details" %}
          </div>
          <img
          class="np-card-image"
          alt="{{ course.name }}"
          src="{{ course.image_url }}"
          >
      </div>
      <div class="np-card-text-wrapper">
        <div class="np-card-content np-card-padding np-card-content-vertical">
          <h3 class="np-card-content-title">
            {{ course.name }}
          </h3>
          <div class="np-card-content-description">
            {{ course.full_description }}
          </div>

          <div class="np-card-content-footer" style='display: flex; flex-direction: row; justify-content: space-between;'>
            <a
              class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}"          
              >
                {% if course.enrolled? == false %}
                  {% t shared.enroll %}
                {% elsif course.started? == false %}
                  {% t shared.start, key: current_school.course_vocabulary %}
                {% elsif course.completed? %}
                  {% t shared.course.view, key: current_school.course_vocabulary %}
                {% else %}
                  {% t shared.continue %}
                {% endif %}
            </a>
            <div class="np-card-image-content-bottom" style="position: unset;">
              <div class="np-card-content-progress np-button-color">
              {% t shared.progress, count: course.progress %}
              </div> 
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
