<div class="np-top-cta stick-to-bottom np-hidden">
  {% learning_path_next_step_button learning_path, class: "lp-button np-top-button np-button-font-color np-button np-button-big" %}
</div>
<script>
  const learningPathBtnText = document.querySelector(".lp-button").innerText
  console.log(learningPathBtnText)
  if (learningPathBtnText.toLowerCase() == "start new content") {
    document.querySelector(".np-top-cta").innerText = "Start"
    document.querySelector(".np-top-cta").classList.remove("np-hidden")
    document.querySelector(".np-sub-navigation").style.display = "none";
  }
</script>

{% capture icon %}fa-arrow-left{% endcapture %}
{% include "mobile_header", title: learning_path.name, back_icon: icon, back_link: "/app/courses#resource-bundles" %}

{% assign courses = courses.enrolled %}
<main class="np-main np-max-width np-page-container">
  <div id="learning-path-mobile">
    <div class="np-card cover-page-card">
      <div class="np-card-container">
        <img src="{{ learning_path.image_url }}" alt="{{ learning_path.name }}" />
        <div class="card-content-wrapper">
          <div class="cover-page-card-title">{{ learning_path.name }}</div>
          <div class="cover-page-card-desc">{{ learning_path.description | strip_html }}</div>
          <div class="card-info">
            <div class="card-courses-count">{{ learning_path.items.count }} resources</div>
            <span class="dot-divider">&#183;</span>
            <div class="card-time"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="np-card-spacing">
      <div class="np-learning-path-outline">
        <div class="np-card-heading">Contents</div>
          {% assign courses_index = 1 %}
          {% for item in learning_path.items %}
            {% assign course_desc = "" %}
            {% assign course_length = "" %}
            {% for course in courses %}
              {% if course.id == item.id %}
                {% assign course_desc = course.short_description %}
                {% assign course_length = course.properties.course_length %}
              {% endif %}
            {% endfor %}
            {% if item.course? %}
              {% if learning_path.enrolled? and item.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 item.completed? %}completed{% endif %}">
                    {% if item.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: item.id %}">
                    <div class="np-card-content">
                      <div class="np-learning-path-outline-content">
                        <div class="labels-wrapper">
                          {% if item.progress > 0 and item.progress < 100 %}
                            <div class="label label-orange">In progress</div>
                          {% endif %}
                        </div>
                        <div class="np-learning-path-outline-name np-top-title">{{ item.name }}</div>
                        <div class="learning-path-outline-desc">{{course_desc}}</div>
                        <div class="info-wrapper">    
                          <div class="course-time">{{course_length}}</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">{{ item.name }}</div>
                      <div class="learning-path-outline-desc">{{course_desc}}</div>
                      <div class="info-wrapper">    
                        <div class="course-time">{{course_length}}</div>
                        <div class="labels-wrapper" style="margin-left:10px">
                          <div class="label label-green">New</div>
                        </div>
                      </div>
                    </div>    
                  </div>
                </div>
              {% endif %}
            {% endif %}
            {% assign courses_index = courses_index | plus: 1 %}
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</main>

<script>
  setTimeout(function() {
    const isAppContextAware = sessionStorage.getItem('appContext') !== null && sessionStorage.getItem('appContext') !== 'Returning to App';
    const appContextCategoryOrigin = sessionStorage.getItem('appContextCategoryOrigin')
    if (isAppContextAware && !appContextCategoryOrigin) {
      console.log("App Context value exists. Category Origin does not. Go back to app.")
      $(".mobile-header .exit-icon").attr("href", "javascript: sendMessage()")
    }
  }, 500)
</script>