{% comment %} {% include "header" %} {% endcomment %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}
{% comment %} {% include "sub_navigation" %} {% endcomment %}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
  $(document).ready(function(){
    document.domain = 'voltsystems.net';
    console.log('{{current_person.email}} ' + document.URL)

    var currentUrl = window.location.href.toLowerCase();

    if (currentUrl.indexOf("email") > -1 && currentUrl.indexOf('{{current_person.email}}') == -1){
        console.warn('Signing user out or northpass')
        fetch('/learners/sign_out')
          .finally(() => {
            window.location.reload();
          });
    } else {
      document.getElementById('main-content').style.visibility = "visible"
    }
});
</script>

<div  id="loader">
  <img id="loader-image" src="https://icon-library.com/images/spinner-icon-gif/spinner-icon-gif-1.jpg" alt="Loading..." />
</div>

<main class="np-main np-courses np-subpage-container np-max-width" id="main-content" style="visibility: hidden">

  <!-- {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %} -->
  {% assign incomplete_course_count = 0 %}
  {% for course in courses.enrolled %}
    {% unless course.completed? %}
      {% assign incomplete_course_count = incomplete_course_count | plus: 1 %}
    {% endunless %}
  {% endfor %}

  {% if incomplete_course_count > 0%}
    <div class="np-resource-title">
      {{incomplete_course_count}} of {{courses.enrolled.size}} Courses Remaining
    </div>

    {% for course in courses.enrolled %}
      {% unless course.completed? %}
        <div class="col-xs-12">
          {% include "cards_course" with course %}
        </div>
      {% endunless %}
    {% endfor %}
  {% endif %}


  <div class="container" style="margin-bottom: 30px;">
    <div class="row">
        <div class="col-xs-12">
            After you have completed your required Courses, download the <b>"Walmart Volt"</b> app. You will use the app to Check In and Out of stores. Choose your app store below.
        </div>
    </div>
        <p>
        <p>
    <div class="row">
        <div class="col-xs-6" style="text-align:center;">
            <a href="https://apps.apple.com/us/app/volt-systems/id1277108662" target="_blank"><img src="https://wmtvolt2.voltsystems.net/assets/img/logos/app-store.png" alt="iOS App" style="width:153px;"></a>
        </div>
        <div class="col-xs-6" style="text-align:center;">
            <a href="https://play.google.com/store/apps/details?id=com.voltsystems.walmartvolt&hl=en_US&gl=US" target="_blank"><img src="https://wmtvolt2.voltsystems.net/assets/img/logos/android-googleplay.png" alt="Android App" style="width:153px;"></a>
        </div>
    </div>
        <p>
        <p>
    <div class="row">
        <div class="col-xs-12">
            If your company installs mobile apps for you, then you can open the app on your device after they have completed the installation.
        </div>
    </div>
  </div>


  {% assign completed_course_count = 0 %}
  {% for course in courses.enrolled %}
    {% if course.completed? %}
      {% assign completed_course_count = completed_course_count | plus: 1 %}
    {% endif %}
  {% endfor %}

  {% if completed_course_count > 0%}
    <div class="np-resource-title">
      {{ completed_course_count }} of {{ courses.enrolled.size }} Courses Completed
    </div>

    {% for course in courses.enrolled %}
      {% if course.completed? %}
        <div class="col-xs-12">
          {% include "cards_course" with course %}
        </div>
      {% endif %}
    {% endfor %}
  {% endif %}

</main>

{% comment %} {% include "footer" %} "col-xs-12 col-sm-6 col-lg-4 np-stretch-content" {% endcomment %}
{% include "footer" %}

<style>
  @media (max-width: 767px) {
    .np-top-button{
      width: 35%;
      margin-top: 5%;
    }
  }

  @media (max-width: 700px) {
    .np-top-button{
      width: 42%;
    }
  }

  @media (max-width: 550px) {
    .np-top-button{
      height: 40px;
    }

    .np-button-big{
      min-height: 0;
    }
  }

  @media (max-width: 500px) {
    .np-top-button{
      width: 50%;
    }
  }

  @media (max-width: 425px) {
    .np-top-button{
      width: 100%;
    }

    .np-top-button{
      height: 30px;
    }
  }

  #loader{
    position: fixed;
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    opacity: 0.9;
    background: #fff;
    z-index: 99;
  }

#loader-image{
  height: 22rem;
  width: 22rem;
  margin-top: 15rem;
  top: 100px;
  left: 240px;
  z-index: 100;
}
</style>

<script>
  window.addEventListener('load', () => {
    document.getElementById('loader').style.display = 'none';
  })
</script>