<div class="np-card np-no-horizontal-padding">
  <div class="np-card-container" style="border-radius: 8px;">
    <div class="np-learning-path">
      <img
        alt="{{ learning_path.name }}"
        class="np-card-image np-learning-path-image"
        src="{{ learning_path.image_url }}"
      />
      <div class="np-card-text-wrapper">

        <div class="np-card-content np-card-padding np-card-content-vertical">
          <h3 class="np-card-content-title">
            {{ learning_path.name }}
          </h3>

          <div class="np-hidden-mobile np-card-content-description">
            {{ learning_path.description }}
          </div>

          <div class="np-hidden-mobile np-card-content-progress
          np-button-color">
            {% t shared.progress, count: learning_path.progress %}
          </div>

          <div class="np-hidden-mobile np-card-progress-bar-container">
            <div
              style="width: {{ learning_path.progress }}%;"
              class="np-button-background-color np-card-progress-bar">
            </div>
          </div>

          <div class="np-card-content-footer">
            <a
              class="np-button"
            {% if learning_path.enrolled? %}
              {% if learning_path.current_item.course? %}
                href="{% route learning_path, id: learning_path.id %}"
              {% elsif learning_path.current_item.training_event? %}
                href="{% route training_session, id: learning_path.current_item.id %}"
              {% endif %}
            {% else %}
                href="{% route learning_path_enrollment, code: learning_path.enrollment_code %}"
            {% endif %}          
            >
              {% if learning_path.enrolled? == false %}
                {% t shared.enroll %}
              {% elsif learning_path.started? == false %}
                Start Program
              {% elsif learning_path.completed? %}
                {% t shared.learning_path.view %}
              {% else %}
                {% t shared.continue %}
              {% endif %}
            </a>
            <span class="np-hidden-mobile np-learning-path-items">
              <span class="np-learning-path-items-count">
             {{ learning_path.items.count }} {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .np-learning-path .np-card-content.np-card-padding.np-card-content-vertical {
    border-radius: 0 8px 8px 0;
  }

  .np-learning-path .np-card-content-footer .np-button {
    width: auto;
    background:#cc0033;
    color:#fff!important;
  }

</style>