{% assign catalog_courses = courses.in_catalog %}

{% assign survey_courses = "" %}
{% assign survey_course_completed = false %}

{% include "header" %}
<main class="np-main np-homepage">
  <div class="np-homepage-hero">
    <div class="np-homepage-hero-container">
      <div class="np-homepage-hero-content">
        <div class="Home np-homepage-headline">
          {{ homepage.headline }}
        </div>
        <div class="hero-search-wrapper">
          <div class="Home np-homepage-subheadline">
            {{ homepage.subheadline }}
          </div>
          <form
            class="np-header-search np-hero-search"
            data-test="mobile-search"
            method="get"
            action="{% route search %}">
			{% if current_person.properties.language == "fr" %}
            <input
              aria-label="?"
              class="hero-search-input"
              type="text"
              name="q"
			  placeholder="?" />
		  {% else %}
            <input
              aria-label="What are you looking for?"
              class="hero-search-input"
              type="text"
              name="q"
              placeholder="What are you looking for?" />
			{% endif %}
            <i class="np-header-search-icon hero-search-icon far fa-search"></i>
          </form>
        </div>
      </div>
      <img
        class="np-homepage-hero-image"
        src="{{ homepage.artwork_url }}"
        alt="{{ homepage.headline }}" />
    </div>
  </div>
  {% include "sub_navigation" %}

  {% include "homepage_featured", items: catalog_courses %}

        </div>
      </div>
    </div>
  </div>

  {% include "homepage_ongoing_training", items: catalog_courses %}

  {% comment %} {% include "homepage_topics" %} {% endcomment %}
	{% include "footer" %}

<script>
  if (window.location.pathname == "/app") {
    document
      .querySelector(".np-sub-navigation")
      .classList
      .add("homepage-nav")
      document
      .querySelector(".np-header")
      .classList
      .add("homepage-nav")
  }
  document.querySelector(".np-hidden-desktop .dropdown-arrow").addEventListener("click", function(e) {
    if (e
        .target
        .parentElement
        .classList
        .contains("open")) {
      e
        .target
        .parentElement
        .classList
        .remove("open")
    } else {
      e
        .target
        .parentElement
        .classList
        .add("open")
    }
  })

  window.onload = function() {
    var stickySubNav = document.querySelector('.np-sub-navigation');
    var headerOffset = findOffset(stickySubNav);

    window.onscroll = function() {
      var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (bodyScrollTop > (headerOffset.top - 24)) {
        stickySubNav.classList.add('fixed');
      } else {
        stickySubNav.classList.remove('fixed');
      }
    };
    }

  function findOffset(element) {
    var top = 0,
      left = 0;

    do {
      top += element.offsetTop || 0;
      left += element.offsetLeft || 0;
      element = element.offsetParent;
    } while (element);

    return {top: top, left: left};
  }

  window.addEventListener("load", function() {

    var progressCards = document.querySelectorAll(".np-card-learning-path-progress");

    for (var i = 0; i < progressCards.length; i++) {
      var lpProgressCard = progressCards[i]
      var progressRing = lpProgressCard.querySelector(".progress-ring")
      let circle = progressRing.querySelector(".circle-progress")
      let total = progressRing.getAttribute("data-total")
      let numCompleted = lpProgressCard.querySelector(".lp-completed-items span > div").getAttribute("data-completed")
      var radius = circle.r.baseVal.value;
      var circumference = radius * 2 * Math.PI;

      circle.style.strokeDasharray = `${circumference} ${circumference}`;
      circle.style.strokeDashoffset = `${circumference}`;

      const percent = numCompleted / total
      setProgress(percent, circle)
    }

    function setProgress(percent, circle) {
      const offset = circumference - percent * circumference;
      circle.style.strokeDashoffset = offset;
    }
  })
</script>

<style>
  .np-homepage-hero {
    background-color: #3C228A;
    padding: 40px 24px 24px;
    flex-direction: column;
  }

  .np-homepage-hero-image {
    object-fit: unset;
    width: 115px;
    height: auto;
    min-height: unset;
    margin-top: 24px;
  }

  .np-homepage-hero-content {
    position: relative;
    padding: 0;
    color: #fff;
		padding-bottom: 65px;
  }

  .np-homepage-hero .np-homepage-headline {
    font-weight: 700;
    font-size: 24px;
    line-height: 33px;
    margin-bottom: 24px;
  }

  .np-homepage-subheadline {
    font-size: 20px;
    line-height: 12px;
    margin-bottom: 8px;
    opacity: 1;
  }

  .np-hero-search {
    width: 100%;
  }

  .hero-search-input {
    background-color: #F1F3F4;
    border-radius: 4px;
    padding: 14px 19px 14px 44px;
    border: none;
    font-size: 14px;
    line-height: 19px;
    width: 380px;
    background: #fff;
  }

  .hero-search-icon {
    right: unset;
    left: 16px;
    color: #6C6C6C;
  }

  .np-homepage-row-wrapper {
    padding: 0 16px;
    margin-bottom: 56px;
  }

  .np-homepage-featured-empty {
    margin: 0;
    border: 2px solid #dadce0;
    border-radius: 8px;
    padding: 60px 32px;
  }

  .learning-path-progress-container,
  .learning-path-progress-container > .row {
    height: 100%;
  }

  .popup-trigger,
  .survey-popup-trigger {
    visibility: hidden;
    opacity: 0;
  }

  @media(min-width:768px) {
    .np-homepage-hero-container {
      display: flex;
      align-items: center;
    }

    .np-homepage-hero .np-homepage-headline {
      font-size: 40px;
      line-height: 50px;
      margin-bottom: 20px;
      text-align: left;
    }

    .np-homepage-hero-image {
      width: 200px;
      height: auto;
      margin: 0 0 0 64px;
    }

    .hero-search-wrapper {
      display: flex;
    }

    .np-hero-search {
      margin-left: 32px;
      flex: 2;
    }
  }

  @media(min-width:768px) and (max-width:1365px) {
    .np-homepage-hero .np-homepage-headline {
      font-size: 3.516vw;
      line-height: 4.249vw;
    }
  }

  @media(min-width:1200px) {
    .np-homepage-hero-image {
      width: 300px;
      margin: 0 0 0 100px;
			padding-bottom: 15px;
    }
  }

  @media(min-width:1366px) {

    .np-homepage-hero .np-homepage-headline {
      font-size: 48px;
      line-height: 58px;
    }
  }
</style>