<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 }}"
          style="width: 100%;"
          >
      </div>
      <div class="np-card-text-wrapper" style="border: none !important;">

        <div class="np-card-content np-card-padding np-card-content-vertical" style="border: none !important; background: #F2F2F2">
          <h3 class="np-card-content-title" style="border: none;">
            {{ course.name }}
          </h3>

          <div class="np-card-content-description" style='font-size: 16px !important; line-height: 24px !important; color: #2c4265 !important; font-family: Lexend !important;'>
            {{ course.full_description }}
          </div>

          <div class="np-card-content-footer" style='display: flex; justify-content: space-between;'>
            <div class='np-card-content-footer-left'style='display: flex; justify-content: left;'>
              {% comment %}<a
                class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}" style='background: linear-gradient(90deg, #089FB7 0%, #15824B 100%); font-weight: 800;
                border-radius: 8px; margin-right: 24px;'          
                >{% endcomment %}
              <a
                class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}" style='background: linear-gradient(45deg, #2c4265 0%, #34abe2 100%); font-weight: 800;
                border-radius: 8px; margin-right: 24px;'          
                >
                  {% 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-progress np-button-color" style='font-weight: 700; font-size: 12px; align-self: center; text-transform: uppercase;'>
                {% t shared.progress, count: course.progress %}
              </div> 
            </div>
            {% comment %}<div class='course-detail-rating'>
              <div class='course-detail-rating-stars'>
                {% for i in (1..5) %}
                  {% if course.properties.course_rating >= i %}
                    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
                    </svg>  
                  {% else %}
                    <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path opacity="0.25" d="M10 0L12.5863 6.44033L19.5106 6.90983L14.1846 11.3597L15.8779 18.0902L10 14.4L4.12215 18.0902L5.81535 11.3597L0.489435 6.90983L7.41374 6.44033L10 0Z" fill="#089FB7"/>
                    </svg>
                  {% endif %}
                {% endfor %}
              </div>
              <span class="np-details-label" style= 'display: flex; color: #2c4265;'>
                {{course.properties.course_rating}} <div style='font-weight: 500; padding-left: 5px; color: #2c4265;'>({{course.properties.course_rating_count}}) </div>
              </span>
            </div>{% endcomment %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .np-card-content.np-card-padding.np-card-content-vertical {
    border-radius: 0 8px 8px 0;
  }
  @media screen and (max-width: 1024px) {
    .np-card-content.np-card-padding.np-card-content-vertical {
      border-radius: 8px;
    }
  }

  .np-card-image {
    border-top-left-radius: 8px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
  }
  @media screen and (max-width: 1024px) {
    .np-card-image {
      border-top-right-radius: 8px;
      border-bottom-left-radius: 0;
    }
  }
</style>

<script>
  $(".np-card-content-description").css('font-size','16px !important')
  $(".np-card-content-description").css('color','white !important')
  $(".np-card-content-description").css('font-family', 'Lexend !important')
</script>