{% 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-container transparent-card">
        {% unless course.image_url contains "/assets/defaults/learning_experience/course-" %}
          <img src="{{ course.image_url }}" class="np-top-image" alt="{{ course.name }}" />
        {% endunless %}
        <div class="np-top-title">{{ course.name }}</div>
        <div class="cover-flex-container">
          <div class="card-content-length">
            {% if course.properties.course_length != 'NULL' %}
              <div class="card-content-length">{{ course.properties.course_length }}</div>
            {% endif %}
          </div>
        </div>
        <hr class="hr-dotted" />
      </div>
      <div class="np-card-container np-card-padding np-card-spacing desc-block">
        <h3 class="np-card-heading">About the Resource</h3>
        <div class="np-card-text">{{ course.full_description }}</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.progress > 0 and course.progress < 100 %}
              Resume
            {% elsif course.completed? %}
              Review
            {% else %}
              Start
            {% endif %}
          </a>
        {% endif %}
      </div>
    </div> 
  </main>
{% endif %}

<script>  

  setTimeout(function() {
    if (sessionStorage.getItem('appContext') !== null && sessionStorage.getItem('appContext') !== 'Returning to App') {
      $(".mobile-header .exit-icon").attr("href", "javascript: sendMessage()")  
    } else {
      if (document.referrer.includes("/search") || document.referrer.includes("/progress")) {    
        $(".mobile-header .exit-icon").attr("href", "javascript: goBack()")  
      }
    }
  }, 500)

</script>