{% assign full_course_obj = "" %}
{% for course_obj in courses.in_catalog %}
  {% if course_obj.id == course.id %}
    {% assign full_course_obj = course_obj %}
  {% endif %}
{% endfor %}

{% assign is_cert_category = false %}
{% for category in learning_path.categories %}
  {% if category.name == 'Certifications' %}
	{% assign is_cert_category = true %}
	{% break %}
  {% endif %}
{% endfor %}
{% if learning_path.enrolled? and course.unlocked? %}
  {% if is_cert_category == true %}
  <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-card-content np-card-padding">
      <img
        src="{{ item.image }}"
        alt="{{ course.name }}"
        class="np-learning-path-outline-course-image"
      >
      <div class="np-learning-path-outline-content">
        <div class="np-learning-path-outline-name np-top-title">
          {{ course.name }}
        </div>
        {% if course.instructors %}
          <div class="np-learning-path-outline-caption">
            {{ course.instructors }}
          </div>
        {% endif %}
        <div class="np-learning-path-outline-progress
          {% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
        ">
          {% t shared.progress, count: course.progress %}
        </div>
      </div>
      <i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
      {% if course.optional? %}
        <div class="np-optional-ribbon">
          {% t shared.optional %}
        </div>
      {% endif %}
    </div>
  </a>
{% else %}
  <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-card-content np-card-padding">
      <img
        src="{{ item.image }}"
        alt="{{ course.name }}"
        class="np-learning-path-outline-course-image"
      >
      <div class="np-learning-path-outline-content">
        <div class="np-learning-path-outline-name np-top-title">
          {{ course.name }}
        </div>
        {% if course.instructors %}
          <div class="np-learning-path-outline-caption">
            {{ course.instructors }}
          </div>
        {% endif %}
        <div class="np-learning-path-outline-description">
          {{ full_course_obj.short_description }}
        </div>
        {% if full_course_obj.properties.course_length %}
          <div class="course-length">{{full_course_obj.properties.course_length}}</div>
        {% endif %}
        <div class="np-learning-path-outline-progress
          {% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
        ">
          {% t shared.progress, count: course.progress %}
        </div>
      </div>
      <i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
      {% if course.optional? %}
        <div class="np-optional-ribbon">
          {% t shared.optional %}
        </div>
      {% endif %}
    </div>
  </a>
  {% endif %}
{% else %}
  {% if is_cert_category == true %}
  <div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
    <div class="np-card-content np-card-padding">
      <img
        src="{{ item.image }}"
        alt="{{ course.name }}"
        class="np-learning-path-outline-course-image"
      >
      <div class="np-learning-path-outline-content">
        <div class="np-learning-path-outline-name np-top-title">
          {{ course.name }}
        </div>
      {% if course.optional? %}
        <div class="np-optional-ribbon">
          {% t shared.optional %}
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% else %}
  <div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
    <div class="np-card-content np-card-padding">
      <img
        src="{{ item.image }}"
        alt="{{ course.name }}"
        class="np-learning-path-outline-course-image"
      >
      <div class="np-learning-path-outline-content">
        <div class="np-learning-path-outline-name np-top-title">
          {{ course.name }}
        </div>
        <div class="np-learning-path-outline-description">
          {{ full_course_obj.short_description }}
        </div>
        {% if full_course_obj.properties.course_length %}
          <div class="course-length">{{full_course_obj.properties.course_length}}</div>
        {% endif %}
      </div>
      {% if course.optional? %}
        <div class="np-optional-ribbon">
          {% t shared.optional %}
        </div>
      {% endif %}
    </div>
  </div>
  {% endif %}
{% endif %}
