{% assign categories = '' | split: '' %}
{% for cat in learning_path.categories %}
  {% assign cat_name = cat.name | split: '!@#$%^&*()' %}
  {% assign categories = categories | concat: cat_name %}
{% endfor %}
{% assign compressed_image_url = learning_path.image_url | replace: "resize=width:820,height:500", "resize=width:500,height:305" %}
<div class="np-card np-grid-spacing col-xs-12 col-sm-6 col-md-4" filter-type='lp' category-name='{{categories | join: '+'}}'>
  <div class="np-card-container">
    <img
      class="np-card-image"
      alt="{{ learning_path.name }}"
      src="{{ compressed_image_url }}"
    >
    <div class="np-card-content np-card-content-vertical np-card-padding">
      <p class='categories'>
        {% for category in learning_path.categories %}
          {{category.name}}   
        {% endfor %}
      </p>
      <h3 class="np-card-content-title">
        {{ learning_path.name }}
      </h3>
      <div class="np-card-content-footer">
        <div class="np-card-content-progress np-button-color">
          {% t shared.progress, count: learning_path.progress %}
        </div>
        {% capture learning_path_path %}{% route learning_path, id: learning_path.id %}{% endcapture %}
        <a class="np-button np-button-wide" href="{{ learning_path_path }}">
          {% t shared.view %}
        </a>
      </div>
    </div>
  </div>
</div>

<style>
  .categories {
    margin: 0;
  }
  .np-card {
    min-height: 0;
    min-width: 0;
  }
</style>
