{% if learning_path.enrolled? and course.unlocked? %}
  <div class="np-learning-path-outline-bar np-hidden-mobile"></div>
  <a
    class="learning-path-outline-item"
    href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
  >
    <div class="lp-overview-item">
      <img
        src="{{ item.image }}"
        alt="{{ course.name }}"
        class="learning-path-outline-course-image"
      >
      <div class="np-learning-path-outline-content">
        <div class="learning-path-outline-name">
          {{ course.name }}
        </div>
        <div class="progress-text
          {% if course.completed? %} np-color-success {% else %} progress-text {% 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-item np-learning-path-outline-inactive-item np-card-container">
    <div class="lp-overview-item">
      <img
        src="{{ item.image }}"
        alt="{{ course.name }}"
        class="learning-path-outline-course-image"
      >
      <div class="np-learning-path-outline-content">
        <div class="learning-path-outline-name">
          {{ course.name }}
        </div>
      </div>
      {% if course.optional? %}
        <div class="np-optional-ribbon">
          {% t shared.optional %}
        </div>
      {% endif %}
    </div>
  </div>
{% endif %}

<style>
  .lp-overview-item {
    display: flex;
    width: 100%;
    align-items: center;
  }
  .learning-path-outline-course-image {
    width: 135px;
    height: 75px;
  }
  .np-learning-path-outline-inactive-item {
    border: none;
  }
  .learning-path-outline-name {
    font-size: 24px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.015em;
    text-align: left;
    color: #0F2B46;
  }
  .np-learning-path-outline-item {
    margin-top: 30px;
  }
  .learning-path-outline-item {
    text-decoration: none;
  }
</style>