{% if course.properties.is_single_activity_course %}

  <script>
    window.location.replace("/courses/{{course.id}}");
  </script>

{% else %}

  {% include "header" %}
  <main class="np-main np-max-width np-page-container">
    <div class="np-hidden-mobile" id="course-desktop"> 
      {% include "course_desktop_view" %}
    </div>
    <div class="np-hidden-desktop" id="course-mobile">
      {% include "course_mobile_view" %}
    </div>
  </main>
  {% include "footer" %}
  <style>
    .np-page-container {
        margin-bottom: 0px;
    }

    /* button countdown animation and styles associated with it */
    #course-mobile .np-top-button.animate,
    #course-desktop .np-top-button.animate {
      position:relative;
      background:#000000;
      z-index:1;
    }

    #course-mobile .np-top-button:after,
    #course-desktop .np-top-button:after {
      content: '';
      position: absolute;
      left:0;
      top:0;
      height:100%;
      width:100%;
      z-index:-1;
      border-radius:4px;
      transition:border-radius 0.2s;
    }

    #course-mobile .np-top-button.animate:after,
    #course-desktop .np-top-button.animate:after {
      background-color:#ff2c00;
      animation-name: bgColorLeftToRight;
      animation-duration: 10s;
      animation-timing-function: linear;
      z-index:-1;
      border-top-right-radius:0;
      border-bottom-right-radius:0;
    }

    @keyframes bgColorLeftToRight {
      0% { width:0 }
      100% { width:100% }
    }
    /* end button animaation */

  </style>

  <script>
    var progress = {{ course.progress }}
    progress < 100 ? initCourseCountdown() : "";
  console.log("script")
    // Init 10 second countdown to auto start learner in course
    function initCourseCountdown() {
      console.log("init countdown")
      let btn

      window.innerWidth < 768 ? 
      btn = document.getElementById("course-mobile").querySelector('.np-top-button') : 
      btn = document.getElementById("course-desktop").querySelector('.np-top-button')

      btn.classList.add('animate')

      btn.addEventListener("animationend", () => {
        console.log("ended")
        btn.classList.remove('animate')

        // redirect learner to next activity
        {% if course.enrolled? %}
          window.location.href = `{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}`
        {% endif %}
      }, false);

    }
  </script>
{% endif %}