<div class="np-card np-no-horizontal-padding learning-path-card" categories="{% for category in learning_path.categories %}{{category.name}},{% endfor %}">
  <div class="np-card-container">
    <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-hidden-desktop np-card-header">
          <div class="np-card-header-type">{% t shared.learning_path.title %}</div>
          <div class="np-hidden-desktop  np-card-header-items-count">
            {{ learning_path.items.count }} {% t .items %}
          </div>
        </div>
        <div class="np-hidden-mobile np-card-header">
          <div class="np-card-header-type">Learning path</div>
        </div>

        <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-card-content-subtitle">
            Instructors:
            {{ learning_path.instructor_names }}
          </div>

          <div class="np-hidden-mobile np-card-content-description lp-desc">
            {{ 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">
            <div class="np-hidden-desktop np-card-content-progress
            np-button-color">
              {% t shared.progress, count: learning_path.progress %}
            </div>
            <a class="np-button" href="{% route learning_path, id: learning_path.id %}">
              {% t shared.view %}
            </a>
            <span class="np-hidden-mobile np-learning-path-items">
              <img src="" alt="">
              <span class="np-learning-path-items-count">
                {{ learning_path.items.count }} {% t .items %}
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .np-resource-title{
    color: #010063;
  }

  .np-resource-subtitle{
    color: #01005F;
    font-size: 23px;
  }
</style>
