<section class="bg-isblue">
  <div class="content-wrapper jumbo isflex p-bottom-30">
<div class="home__image">
            <img src="https://storage.googleapis.com/successbox/Partage%20Public/Header_EN_small.png" id="imgHeader" alt="image" /> 
</div> 
  <!-- 
        <div class="w-50 home__intro">
            <h1 class="mainTitle w-70" id="intro__title"></h1>
           <h1 class="mainTitlehome w-70" id="intro__title"></h1> 
           <p class="text mediumhome p-bottom-60 w-70" id="intro__content"></p> 
           < <p class="text medium p-bottom-60 w-70" id="intro__content"></p>
            <p><a href="#courses__title" class="cta isfull" title="" id="discover-button"></a></p>
        </div>-->
        
    </div>
</section>

{% assign fr_top_courses_found = false %}
{% assign en_top_courses_found = false %}

{% for course in my_content.courses %}
  {% if course.cover_path == '/outline/xdfdaaxq/cover' or course.cover_path == '/outline/aji7wjyu/cover' or course.cover_path == '/outline/h1tchlcj/cover'%}
    {% assign fr_top_courses_found = true %}
  {% elsif course.cover_path == '/outline/rudsgfoz/cover' or course.cover_path == '/outline/0dmzvafk/cover' or course.cover_path == '/outline/pmuuq5xd/cover'%}
    {% assign en_top_courses_found = true %}
  {% endif %}
{% endfor %}

<!-- Section FR Top Courses -->
{% if fr_top_courses_found %}
  <section class="bg-isgrey">
    <div class="uk-container uk-container-center school-website-course-index-list uk-margin-top uk-margin-bottom">
      <div class="uk-padding-horizontal">
        <div class="content-wrapper section-height2">
          <div class="p-bottom-5">
            <h2 class="head--2" id="onboarding__title" /> 
          </div>
          <div class="uk-grid uk-grid-flex uk-margin-left-remove">
            <div class="uk-width-medium-6-6 no-padding-left">
              <ul class="uk-grid uk-grid-medium school-website-course-list uk-grid-match" id="courses" data-uk-grid-match="{target:'.uk-panel'}">
                {% for course in my_content.courses %}
                  {% if course.cover_path == '/outline/xdfdaaxq/cover' %}
                    {% include "course" %}
                  {% endif %}
                {% endfor %}

                {% for course in my_content.courses %}
                  {% if course.cover_path == '/outline/aji7wjyu/cover' %}
                    {% include "course" %}
                  {% endif %}
                {% endfor %}

                {% for course in my_content.courses %}
                  {% if course.cover_path == '/outline/h1tchlcj/cover' %}
                    {% include "course" %}
                  {% endif %}
                {% endfor %}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endif %}
<!-- Section FR Top Courses End -->
<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->
<!-- Section EN Top Courses -->
{% if en_top_courses_found %}
  <section class="bg-isgrey">
    <div class="uk-container uk-container-center school-website-course-index-list uk-margin-top uk-margin-bottom">
      <div class="uk-padding-horizontal">
        <div class="content-wrapper section-height2">
          <div class="p-bottom-5">
            <h2 class="head--2" id="onboarding__title" /> 
          </div>
          <div class="uk-grid uk-grid-flex uk-margin-left-remove">
            <div class="uk-width-medium-6-6 no-padding-left">
              <ul class="uk-grid uk-grid-medium school-website-course-list uk-grid-match" id="courses" data-uk-grid-match="{target:'.uk-panel'}">
                {% for course in my_content.courses %}
                  {% if course.cover_path == '/outline/rudsgfoz/cover' %}
                    {% include "course" %}
                  {% endif %}
                {% endfor %}

                {% for course in my_content.courses %}
                  {% if course.cover_path == '/outline/0dmzvafk/cover' %}
                    {% include "course" %}
                  {% endif %}
                {% endfor %}

                {% for course in my_content.courses %}
                  {% if course.cover_path == '/outline/pmuuq5xd/cover' %}
                    {% include "course" %}
                  {% endif %}
                {% endfor %}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endif %}
<!-- Section EN Top Courses End -->
<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------------------- -->
<!-- Section OB Path -->
{%- comment -%} {% for course in my_content.courses %}
  {% if course.cover_path == "/outline/0sfflxyp/cover" or course.cover_path == "/outline/cuyvmz5e/cover" %}
    <section class="bg-isgrey">
      <div class="uk-container uk-container-center school-website-course-index-list uk-margin-top uk-margin-bottom">
        <div class="uk-padding-horizontal">
          <div class="content-wrapper section-height2">
              <div class="p-bottom-5">
                  <h2 class="head--2" id="onboarding__title" /> 
              </div>
            <div class="uk-grid uk-grid-flex uk-margin-left-remove">
              <div class="uk-width-medium-6-6 no-padding-left">
                <ul class="uk-grid uk-grid-medium school-website-course-list uk-grid-match" id="courses" data-uk-grid-match="{target:'.uk-panel'}">
                <!-- insertion course -->
                
                      {% include "course" %}
                
                <!-- Fin insertion course -->
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  {% endif %}
{% endfor %} {%- endcomment -%}
<!-- Fin Section OB Path -->

<div class="uk-container uk-container-center school-website-course-index-list uk-margin-top uk-margin-bottom">
  <div class="uk-padding-horizontal">
    <div class="content-wrapper section-height">
      <div class="p-bottom-5">
        <h2 class="head--2" id="courses__title" />
      </div>

      <div class="uk-grid uk-grid-flex uk-margin-left-remove">
        <div class="uk-width-medium-6-6 no-padding-left">
          <ul class="uk-grid uk-grid-medium school-website-course-list uk-grid-match" id="courses" data-uk-grid-match="{target:'.uk-panel'}">
            {% for course in my_content.courses %}
              {% if course.cover_path != "/outline/0sfflxyp/cover" and course.cover_path != "/outline/cuyvmz5e/cover" %}
                  {% include "course" %}
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>


<script>

  var idz = {
    lang: 'en',
    role: 'agent',
  };

  (function(){
    var wording = {
      title: {
        fr: 'Bienvenue sur l\'iAdvize Academy,',
        en: 'Welcome to iAdvize Academy,',
      },
      content: {
        fr: 'votre espace d\'apprentissage dédié aux enjeux de la conversation en ligne.',
        en: 'the learning space dedicated to your online conversation challenges.',
      },
      discover_button: {
        fr: 'Découvrez nos parcours',
        en: 'Discover our paths',
      },
      courses: {
        fr: 'Parcours',
        en: 'Paths',
      },
      onboarding: {
        fr: 'Premiers pas',
        en: 'Onboarding Path',
      },
       ob_course: {
        fr: 'Démarrez sur iAdvize (8min / 38min)',
        en: 'Get start on iAdvize (8min / 38min)',
      },
      number_of_courses: {
        fr: 'Nombre de cours',
        en: 'Number of courses',
      },
      course_button_start: {
        fr: 'Commencer',
        en: 'Start',
      },
      course_button_default: {
        fr: 'Continuer',
        en: 'Continue',
      },
      course_button_complete: {
        fr: 'Recommencer',
        en: 'Retake',
      },
      course_progress: {
        fr: '% terminés',
        en: '% completed',
      },
      search_placeholder: {
        fr: 'Chercher par mot clé',
        en: 'Search',
      },
      logout: {
        fr: 'Se déconnecter',
        en: 'Log out'
      }
    };

    var setBandeauLink = function(lang) {

        if(lang === 'fr') {
          document.getElementById("imgHeader").src="https://storage.googleapis.com/successbox/Partage%20Public/BandeauBlue_FR_small.png";
        }
        else {
          document.getElementById("imgHeader").src="https://storage.googleapis.com/successbox/Partage%20Public/Header_EN_small.png";
        }

      }

    /*var getWebinarsLink = function(role, lang) {
      if(lang === 'fr') {
        switch(role) {
          case 'admin':
            return 'https://app.livestorm.co/iadvize-5/fr-administrateur-manager';
          case 'manager':
            return 'https://app.livestorm.co/iadvize-5/fr-administrateur-manager';
          default:
            return 'https://app.livestorm.co/p/35079f67-6e16-4835-b334-556c93443927';
        }
      }
      switch(role) {
        case 'admin':
          return 'https://app.livestorm.co/iadvize-5/en-administrator-manager';
        case 'manager':
          return 'https://app.livestorm.co/iadvize-5/en-administrator-manager';
        default:
          return 'https://app.livestorm.co/iadvize-5/en-agent';
      }
    }; */

    var navigation = {
      header: {
        fr: [
          {
            label: 'Parcours',
            href: '#courses__title',
            internal: true,
          },
         /* {
            label: 'Webinars',
            href: null,
            internal: false,
          },*/
        ],
        en: [
          {
            label: 'Paths',
            href: '#courses__title',
            internal: true,
          },
          /*{
            label: 'Webinars',
            href: null,
            internal: false,
          }, */
        ],
      },
      footer: {
        fr: [
          {
            label: 'Base de connaissance',
            href: 'https://help.iadvize.com/hc/fr',
            internal: false,
          },
          {
            label: 'iAdvize.com',
            href: 'https://www.iadvize.com/',
            internal: false,
          },
        ],
        en: [
          {
            label: 'Knowledge base',
            href: 'https://help.iadvize.com/hc/en-gb',
            internal: false,
          },
          {
            label: 'iAdvize.com',
            href: 'https://www.iadvize.com/',
            internal: false,
          },
        ],
      }
    };
    var courses = document.querySelectorAll('.course-card');
    var allCategories = [];
    courses.forEach(function(course){
      var categories = course.dataset.categories.toLowerCase().split(' ∙ ');
      allCategories.push(categories);
    });

    var setRole = function() {
      if(allCategories.indexOf('admin') > -1){
        idz.role = 'admin';
      } else if(allCategories.indexOf('manager') > -1){
        idz.role = 'manager';
      }
    }
    var setLang = function() {
      if(allCategories.indexOf('fr') > -1){
        idz.lang = 'fr';
      }
    }

    allCategories = allCategories.flat();

    setRole();

    setLang();

    setBandeauLink(idz.lang);

    // Create Header Navigation
    (function(){
      var headerNavigation = document.querySelector('#header__navigation');
      var headerNavFirst = headerNavigation.firstChild;
      navigation['header'][idz.lang].forEach(function(navItem) {
        var li = document.createElement('li');
        var a = document.createElement('a');
        a.innerText = navItem.label;
        a.href= navItem.label;
        if(navItem.label === 'Webinars') {
          a.href = getWebinarsLink(idz.role, idz.lang);
        }else{
          a.href = navItem.href;
        }
        if(!navItem.internal) {
          a.target = '_blank';
        }
        li.appendChild(a);
        headerNavigation.insertBefore(li, headerNavFirst);
      });
    })();

    // Fill tags with wording
    (function(){
      var introTitle = document.querySelector('#intro__title');
      var introContent = document.querySelector('#intro__content');
      var discoverButton = document.querySelector('#discover-button');
      var coursesTitle = document.querySelector('#courses__title');
      var onboardingTitle = document.querySelector('#onboarding__title');
      var searchInput = document.querySelector('.search__input');
      var numberOfCourses = document.querySelectorAll('.number-of-courses__label');
      var dropdownLinks = document.querySelectorAll('.uk-nav-navbar li a');

      
      dropdownLinks.forEach(function(link) {
        if(link.href.indexOf('/learners/sign_out') > -1) {
          link.innerText = wording['logout'][idz.lang]
        }
      });

      introTitle.innerText = wording['title'][idz.lang];

      introContent.innerText = wording['content'][idz.lang];

      discoverButton.innerText = wording['discover_button'][idz.lang];

      coursesTitle.innerText = wording['courses'][idz.lang];

      onboardingTitle.innerText = wording['onboarding'][idz.lang];

      searchInput.placeholder = wording['search_placeholder'][idz.lang];

      numberOfCourses.forEach(function(item) {
        item.innerText = wording['number_of_courses'][idz.lang];
      })
    })();



    // Wording of course button
    (function(){
      var courses = document.querySelectorAll('.course-card__footer');
      courses.forEach(function(course){
        var button = course.children[1];
        var progression = course.children[2];
        var progressionPercentage = parseInt(progression.innerText, 10);

        switch(progressionPercentage) {
          case 0:
            button.innerText = wording['course_button_start'][idz.lang];
            progression.innerText = progressionPercentage + wording['course_progress'][idz.lang];
            break;
          case 100:
            button.innerText = wording['course_button_complete'][idz.lang];
            progression.innerText = progressionPercentage + wording['course_progress'][idz.lang];
            break;
          default:
            button.innerText = wording['course_button_default'][idz.lang];
            progression.innerText = progressionPercentage + wording['course_progress'][idz.lang];
            break;
        }
      });
    })();
  })();

</script>


            