{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<main class="np-main np-homepage">
  <div class="homepage-header np-max-width">
    <div class="row">
      <div class="col-xs-12 col-sm-6">
        <form action="{% route search %}" method="get" data-test="desktop-search" style="position:relative;" class="homepage-form">
          <i class="np-header-search-icon far fa-search"></i>
          <input
            aria-label="Search"
            class="np-homepage-search-input"
            type="text"
            name="q"
            placeholder="What do you want to learn?"
          />         
        </form>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="user-intro np-flex">
          <div class="profile-circle">
            {{current_person.first_name | slice: 0}}{{current_person.last_name | slice: 0}}
          </div>
          <div class="intro-text">
            Welcome back,<br> <span>{{current_person.first_name}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="homepage-main-content np-max-width">
    <div class="row">
      <div class="col-xs-12 col-md-4 col-lg-3">
        <div class="homepage-section-header">MATTR BADGES</div>
        {% include "homepage_scoreboard" %}
      </div>
      <div class="col-xs-12 col-md-8 col-lg-9">
        <div class="homepage-section-header">COURSES</div>
        {% include 'homepage_categories' %}
        {% include 'homepage_list_headers' %}
        {% include 'homepage_courses' %}
        <div class="accordion-catalog-courses" id="catalog-accordion">
          <div class="accordion-label">
            Show Optional Courses
            <i class="fa fa-chevron-down"></i>
          </div>
        </div>
        {% include 'homepage_catalog_courses' %}
        {% include "footer" %}
      </div>
    </div>
  </div>
</main>

<script>
var acc = document.getElementById("catalog-accordion");
var i;


acc.addEventListener("click", function() {
  /* Toggle between adding and removing the "active" class,
  to highlight the button that controls the panel */
  this.classList.toggle("active");

  /* Toggle between hiding and showing the active panel */
  var panel = document.getElementById("accordion-panel");
  if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
    acc.querySelector(".accordion-label").innerHTML = "Show Optional Courses <i class='fa fa-chevron-down'></i>"
  } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
    acc.querySelector(".accordion-label").innerHTML = "Hide Optional Courses <i class='fa fa-chevron-up'></i>"
  }
});

</script>

<style>
  .homepage-section-header {
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
    color: #6B686A;
    margin-bottom: 23px;
  }

  .homepage-header {
    padding: 32px 16px;
  }

  .homepage-form {
    max-width:317px;
    margin:auto;
  }

  .np-homepage-search-input {
    border: none;
    border-radius: 8px;
    font-size: 14px;
    height: 44px;
    outline: none;
    padding: 14px 100px 14px 44px;
    width: 100%;
    background-color:#FAFAFA;
  }

  .np-header-search-icon {
    color:#333132;
    left: 14px;
    top: 14px;
    font-size: 16px;
  }

  .user-intro {
    padding: 32px 0;
    align-items:center;
    justify-content:center;
  }

  .profile-circle {
    background-color: #EAD9E3;
    width:64px;
    height:64px;
    min-width:64px;
    border-radius:50%;
    font-weight: 600;
    font-size: 25.6px;
    line-height: 150%;
    color: #333132;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:32px;
  }

  .intro-text {
    font-weight:600;
    font-size:24px;
    line-height:28px;
  }

  .intro-text > span {
    color: #2D29FC;
  }

  .homepage-main-content {
    padding: 24px 16px;
  }

  .accordion-catalog-courses {
    color: #333132;
    cursor: pointer;
    width:100%;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:32px 0;
  }

  .accordion-catalog-courses:before {
    content: "";
    position:absolute;
    top:50%;
    left:0;
    transform:translateY(-50%);
    background: #DCDADB;
    height:4px;
    color: #333132;
    cursor: pointer;
    width:100%;
    z-index:-1;
  }

  .accordion-label {
    background: #DCDADB;
    font-size: 12px;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
    transition: 0.2s;
    padding:6px 12px;
    border-radius:30px;
  }

  .accordion-catalog-courses.active .accordion-label {
    background-color: #6B686A;
    color:#fff
  }

  .accordion-catalog-courses.active:before {
    background-color: #6B686A;
  }

  #accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom:50px;
  }

  @media (min-width:768px) {
    .homepage-header {
      padding: 80px 64px;
    }

    .homepage-header > .row {
      flex-direction:row-reverse;
    }

    .homepage-form {
      margin:0 0 0 auto;
    }

    .user-intro {
      padding: 0;
      justify-content: flex-start;
    }

    .intro-text {
      font-size:40px;
      line-height:47px;
    }
  }
</style>