{% if learning_path.enrolled? and course.unlocked? %}
  <div class="learning-path-item-wrapper">
    <div class="np-learning-path-outline-bar {% if courses_index == 1 %}np-hidden{% endif %}"></div>
    <div class="learning-path-item-indicator {% if course.completed? %}completed{% endif %}">
      {% if course.completed? %}
        <i class="fa fa-check"></i>
      {% else %}
        {{courses_index}}
      {% endif %}   
    </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">
        <div class="np-learning-path-outline-content">
          <div class="labels-wrapper">
            {% if course.progress > 0 and course.progress < 100 %}
              <div class="label label-orange">In progress</div>
            {% endif %}
          </div>
          <div class="np-learning-path-outline-name np-top-title">
            {{ course.name }}
          </div>
          <div class="learning-path-outline-desc">
            Lorem ipsum dolor sit amit
          </div>
          <div class="info-wrapper">    
            <div class="course-time">XX min</div>
          </div>
        </div>
        <i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
      </div>
    </a>
  </div>
{% else %}
  <div class="learning-path-item-wrapper">
    <div class="np-learning-path-outline-bar {% if courses_index == 1 %}np-hidden{% endif %}"></div> 
    <div class="learning-path-item-indicator">{{courses_index}}</div>
    <div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
      <div class="np-learning-path-outline-content">
        <div class="np-learning-path-outline-name np-top-title">
          {{ course.name }}
        </div>
        <div class="learning-path-outline-desc">
          Lorem ipsum dolor sit amit
        </div>
        <div class="info-wrapper">    
          <div class="course-time">XX min</div>
        </div>
      </div>    
    </div>
  </div>
{% endif %}