<div
  class="np-card"
  categories="{% for category in learning_path.categories %}{{category.name}},{% endfor %}"
  progress="{{ learning_path.progress }}">
  <a class="minified-card-container" href="{% route learning_path, id: learning_path.id %}">
    <div class="minified-card-image-container minified-card-padding justify-center">
      <div class="minified-card-image-container-image" style="background-image: url({{ learning_path.image_url }})"></div>
    </div>
    <div class="np-card-content np-card-content-vertical minified-card-padding flex-1">
      <div class="np-card-content-title flex-1">
        {{ learning_path.name }}
      </div>
      <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
          {% elsif learning_path.progress > 0 and learning_path.progress < 100 %}
            En progreso
          {% else %}
            No iniciado
          {% endif %}
        </span>
      </div>
    </div>
  </a>

  <div class="np-card-stack">
    <div class="np-card-stack-level-1"></div>
    <div class="np-card-stack-level-2"></div>
  </div>
</div>