<div class="np-card" categories="{% for category in learning_path.categories %}{{category.name}},{% endfor %}">
  <div class="np-card-container">
    <div class="custom-learning-path">
      <img
        alt="{{ learning_path.name }}"
        class="np-card-image"
        src="{{ learning_path.image_url }}" />
      <div class="np-card-text-wrapper">
        <div class="custom-card-header">
          <i class="np-card-header-icon far fa-road"></i>
          <div class="np-card-header-type">{% t shared.learning_path.title %}</div>
          <div class=" np-card-header-items-count">
            {% if learning_path.items.count == 0 %}
              <span class="lang-en"></span>No Lessons</span>
              <span class="lang-es">No hay lecciones</span>
            {% elsif learning_path.items.count == 1 %}
              <span class="lang-en">1 Lesson</span>
              <span class="lang-es">1 Lección</span>
            {% else %}
              <span class="lang-en"></span>{{ learning_path.items.count }} Lessons</span>
              <span class="lang-es">{{ learning_path.items.count }} Lecciones</span>
            {% endif %}

          </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">
            {{ learning_path.instructor_names }}
          </div>
          <div class="lp-footer-placeholder"></div>
          <div class="np-card-content-footer">
            <div
              class="np-card-content-progress"
              {% if learning_path.progress == 100 %}
              style="color: #0AAD0A;"
              {% endif %}>
                <span class="lang-en">
                  {% t shared.progress
                    , count: learning_path.progress %}
                </span>
                <span class="lang-es">
                  {% if learning_path.progress == 100 %}
                    Completado
                  {% else if learning_path.progress > 0 and learning_path.progress < 100 %}
                    En progreso
                  {% else %}
                    No iniciado
                  {% endif %}
                </span>
            </div>
            <a class="np-button" href="{% route learning_path, id: learning_path.id %}">
              {% if learning_path.progress == 0 %}
                <span class="lang-en">Start</span>
                <span class="lang-es">Comenzar</span>
              {% else if learning_path.progress >0 and learning_path.progress < 100 %}
                <span class="lang-en">Continue</span>
                <span class="lang-es">Continuar</span>
              {% else %}
                <span class="lang-en">{% t shared.view %}</span>
                <span class="lang-es">Ver</span>
              {% endif %}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="np-card-stack">
    <div class="np-card-stack-level-1"></div>
    <div class="np-card-stack-level-2"></div>
  </div>
</div>