{% 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-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-learning-progress-text-color {% endif %}
        ">
          {% if course.completed? %}
            <span class="lang-en-US">Completed</span>
            <span class="lang-es">Completado</span>
            <span class="lang-fr">Terminé</span>
            <span class="lang-de">Abgeschlossen</span>
            <span class="lang-en-GB">Completed</span>
            <span class="lang-nl">Voltooid</span>
            <span class="lang-pt-BR">Completo</span>
          {% elsif course.started? %}
            <span class="lang-en-US">In Progress</span>
            <span class="lang-es">En Progreso</span>
            <span class="lang-fr">En Cours</span>
            <span class="lang-de">In Bearbeitung</span>
            <span class="lang-en-GB">In Progress</span>
            <span class="lang-nl">In Progress</span>
            <span class="lang-pt-BR">Em Progresso</span>
          {% else %}
            <span class="lang-en-US">{% t shared.progress
, count: course.progress %}</span>
            <span class="lang-es">No iniciado</span>
            <span class="lang-fr">Non commencé</span>
            <span class="lang-de">Fortschritt</span>
            <span class="lang-en-GB">Not started</span>
            <span class="lang-nl">Niet begonnen</span>
            <span class="lang-pt-BR">Não iniciado</span>
          {% endif %}

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