{% assign groups = current_person.groups | map: 'name'%}
{% if groups contains 'NZ Mandatory Training' %}
  {% assign nz_status = true%}
{% else %}
  {% assign nz_status = false%}
{% endif %}

{% 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" %}

  {% if nz_status %}
    <style>
      #course-mobile .np-top-button:after,
      #course-desktop .np-top-button:after{
        border-radius: 30px !important;
      }
    </style>
  {% endif %}
  
  <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>
{% if course.properties.course_language == 'fr' %}
<script>
$('div.np-top-vocabulary.np-text-title.np-text-muted').text('APPRENEZ COMMENT DANS CE COURS DE 3 MINUTES')
$('div.np-text-title.np-course-outline-title').text('PLAN DE COURS')
$('.np-card-heading').text('À propos du module')
</script>
  {% if course.progress == 0 %}
    <script>
    $('.np-top-button.np-button-font-color.np-button.np-button-big').text('Commencer le cours')
    </script>
  {% elsif  course.progress > 0 and course.progress < 100 %}
    <script>
    $('.np-top-button.np-button-font-color.np-button.np-button-big').text('Continuer')
    </script>
  {% else %}
    <script>
    $('.np-top-button.np-button-font-color.np-button.np-button-big').text('Reprendre le cours')
    </script>
  {% endif %}

{% endif %}

{% if course.properties.course_language != 'fr' %}
  <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 %}
{% endif %}