{% if learning_path.enrolled? and course.unlocked? %}
  <div class="np-learning-path-outline-bar np-hidden-mobile"></div>
  <a
    class="np-learning-path-outline-item np-card-container"
    href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
  >
    <div class="np-learning-path-outline-course-image-wrapper">
     <img
        src="{{ item.image }}"
        alt="{{ course.name }}"
        class="np-learning-path-outline-course-image"
      >
    </div>
    <div class="np-card-content np-card-padding">
      <div class="np-learning-path-outline-content">
        <div class="np-learning-path-card-info">
          <div class="np-learning-path-outline-progress eyebrow-lg {% if course.progress == 0 %}gray{% endif %}">
            {% if course.progress == 0 %}
              {% t shared.progress, count: course.progress %}
            {% elsif course.progress > 0 and course.progress < 100 %}
              {{course.progress}}%
            {% else %}
              <i class="fas fa-check-circle"></i> COMPLETED
            {% endif %}
            
          </div>
          {% assign time = courses.enrolled | where: "id", course.id %}

           {% if time.first.properties.duration != blank %} 
            <div class="course-duration">
            <i class="fal fa-clock"></i>
              {{time.first.properties.duration}}
            </div>
          {% endif %} 
        </div>
        <div class="header-5 fw-semibold">
          {{ course.name }}
        </div>
         <div class="fw-semibold" style="margin-top:30px;">
            {% t shared.view %} course
          <i class="far fa-long-arrow-right"></i>
        </div>
      </div>
      {% if course.optional? %}
        <div class="np-optional-ribbon">
          {% t shared.optional %}
        </div>
      {% endif %}
    </div>
  </a>
{% else %}
  <div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
    <div class="np-learning-path-outline-course-image-wrapper">
     <img
        src="{{ item.image }}"
        alt="{{ course.name }}"
        class="np-learning-path-outline-course-image"
      >
    </div>
    <div class="np-card-content np-card-padding">
      <div class="np-learning-path-outline-content">
        <div class="header-5 fw-semibold">
          {{ course.name }}
        </div>

      </div>
      {% if course.optional? %}
        <div class="np-optional-ribbon">
          {% t shared.optional %}
        </div>
      {% endif %}
    </div>
  </div>
{% endif %}
