{% if course.properties.skip_course_outline_page %}
  <script>
    window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
  </script>
{% else %}
  {% assign back_button_url = "/app/courses" %}
  {% for category in course.categories %}
    {% assign cat_name = category.name | replace: " ", "-" | downcase %}
    {% assign back_button_url = '/app/courses#' | append: cat_name %}
  {% endfor %}

  <div class="mobile-header">
    <a href="{{back_button_url}}" class="exit-icon">
      <i class="fal fa-arrow-left"></i>
    </a>
    <div class="header-title">{{ course.name }}</div>
  </div>

  <main class="np-main np-max-width np-page-container course-cover-page">
    <div id="course-mobile">
      <div class="np-card cover-page-card">
        <div class="np-card-container">
          <img src="{{ course.image_url }}" alt="{{ course.name }}" />
          <div class="card-content-wrapper">
            <div class="cover-page-card-title">{{ course.name }}</div>
            <div class="cover-page-card-desc">{{ course.full_description }}</div>
            <div class="card-info">
              {% if course.properties.course_length != 'NULL' %}
                <div class="card-content-length">{{ course.properties.course_length }}</div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
      <div class="np-card-container np-card-padding np-card-spacing">
        {% include "course_outline" %}
      </div>
      <div class="np-top-cta stick-to-bottom">
        {% if course.learner_can_retake? %}
          <form action="{% route course_retake, id: course.id %}" method="POST">
            {% form_authenticity_token %}
            <button type="submit" class="np-top-button np-button-font-color np-button np-button-big">Review</button>
          </form>
        {% else %}
          <a
            class="np-top-button np-button-font-color np-button np-button-big"
            {% if course.enrolled? %}
            href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
            {% else %}
            href="{% route course_enrollment, code: course.enrollment_code %}"
            {% endif %}>
            {% if course.enrolled? %}
              {% if course.progress > 0 and course.progress < 100 %}
                Resume
              {% elsif course.completed? %}
                Review
              {% else %}
                Start
              {% endif %}
            {% else %}
              Enroll
            {% endif %}
          </a>
        {% endif %}
      </div>
    </div>
  </main>
{% endif %}

<script>
  setTimeout(function() {
    const isAppContextAware = sessionStorage.getItem('appContext') !== null && sessionStorage.getItem('appContext') !== 'Returning to App';
    const appContextCategoryOrigin = sessionStorage.getItem('appContextCategoryOrigin')

    if (document.referrer.includes("/search") || document.referrer.includes("/progress")) {
      console.log("User came directly from 'Search' or 'Progress' Tab.")
      if (isAppContextAware && !appContextCategoryOrigin) {
        console.log("Go back to app.")
        $(".mobile-header .exit-icon").attr("href", "javascript: sendMessage()")
      } else {
        console.log("Go back to previous page")
        $(".mobile-header .exit-icon").attr("href", "javascript: goBack()")
      }   
    } else {
      if (window.location.pathname.includes("learning_paths")) {
        console.log("User navigating a learning path, Arrow will redirect back to learning path cover page.")
        const pathParts = window.location.pathname.split("/")
        $(".mobile-header .exit-icon").attr("href", `/app/learning_paths/${pathParts[3]}`)
      } else {
        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>