{% if learning_path.enrolled? and course.unlocked? %}
  <a
    class="np-learning-path-outline-item card-container lp-course-card"
    href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
  >
    <div class="np-card-content np-card-padding">
      <div class="learning-path-outline-content">
        <div class="np-learning-path-outline-name np-top-title course-name">
          {{ course.name }}
        </div>
        <div class="learning-path-outline-progress
          {% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
        ">
          {% t shared.progress, count: course.progress %}
        </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-card-content np-card-padding">
      <div class="learning-path-outline-content">
        <div class="np-learning-path-outline-name np-top-title course-name">
          {{ course.name }}
        </div>
      </div>
      {% if course.optional? %}
        <div class="np-optional-ribbon">
          {% t shared.optional %}
        </div>
      {% endif %}
    </div>
  </div>
{% endif %}
