<div class="np-card np-no-horizontal-padding">
  <div class="np-card-container">
    <div class="np-learning-path">
      <div class="np-learning-image">
        <span class="np-hidden-mobile np-learning-path-items">
          {% assign totduration = 0 %}
          {% for item in learning_path.items %}
            {% if item.course? %}
              {% assign course = courses.in_catalog | where: "id", item.id  %}
              {% unless course == empty %}
              {% assign duration = course.first.properties.duration %}
              {% assign totduration = totduration |  plus: duration  %}
            {% endunless %}
             {% endif %} 
          {% endfor %} 
          {% assign strduration = "" %}
          {% if totduration >= 60  %}
            {% assign hour = totduration  | divided_by: 60 %}
            {% assign hourfloat = totduration | times: 1.0  | divided_by: 60 %}
            {% assign min = hourfloat  | minus: hour %}
            {% assign min =  min | times: 60 %}
            {% assign min =  min | floor %}
            {% if hour == 1 and min > 0 %}
                {% assign strduration  = hour |  append: ' hour ' |  append: min | append: " mins"  %} 
            {%  elsif hour > 1 and min > 0 %}   
                {% assign strduration  = hour |  append: ' hours ' |  append: min | append: " mins"  %} 
            {%  elsif hour > 1 and min <= 0  %}   
                {% assign strduration  = hour |  append: ' hours' %} 
            {%  elsif hour == 1 and min <= 0  %}   
                  {% assign strduration  = hour |  append: ' hour' %}   
            {% endif %}
          {% elsif totduration > 0 %}  
            {% assign strduration  = totduration | append: " mins"  %} 
          {% endif %} 
          <span class="np-learning-path-items-count">
            {{ learning_path.items.count }} {% t .items %}
          </span>
          <span class="np-learning-path-items-count">
            {{ strduration }}
          </span>
        </span>
      <img alt="{{ learning_path.name }}" class="np-card-image np-learning-path-image"
        src="{{ learning_path.image_url }}" />
        </div>
      <div class="np-card-text-wrapper">
        <div class="np-hidden-desktop np-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-hidden-desktop  np-card-header-items-count">
            {{ learning_path.items.count }} {% t .items %}
          </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="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="progress-cta-container">
            <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>
            </div>
          </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>
<style>
  .np-learning-image{
    background: #FFEFDE;
    max-width: 345px;
    align-content: center;
  }
  @media screen and (min-width: 768px){
    .progress-cta-container{
      display: flex;
      flex-direction: row;
      gap: 20px;
    }
    .np-card-content-footer{
      margin-top: 0;
    }
    .np-learning-path-items{
      bottom: 20px;
      top: auto;
    }
    .np-learning-paths .np-card-content{
      height: calc(100% - 16px);
      padding-top: 24px;
    }
    .np-learning-paths .np-learning-path-image{
      min-height: auto;
      width: 100%;
    }
  }
</style>