{% 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="np-homepage-headline">
          {{ homepage.headline }}
        </div>
        <div class="hero-search-wrapper">
          <div class="np-homepage-subheadline">
            {{ homepage.subheadline }}
          </div>
          <form class="np-header-search np-hero-search" data-test="mobile-search" method="get" action="{% route search %}">
            <input aria-label="What are you looking for?" class="hero-search-input" type="text" name="q" placeholder="What are you looking for?" />
            <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" %}
   <div class="np-homepage-featured np-max-width">

    <div class="row np-flex-center">
      <div class="col-xs-12 col-sm-8">
        <div class="np-homepage-featured-text">
          <div class="np-homepage-headline">
            {{ homepage.featured_courses_headline }}
          </div>
          <div class="np-homepage-subheadline">
            {{ homepage.featured_courses_subheadline }}
          </div>
        </div>
        {% if courses.featured.any? %}
          <div class="np-homepage-featured-courses row">
            {% for course in courses.featured %}
              <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
                {% include "cards_course" with course %}
              </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="np-homepage-featured-empty">
            <div class="np-zero-state-text">
              {% t .empty, key: current_school.course_vocabulary %}
            </div>
            <img
              class="np-zero-state-courses"
              alt="{% t .empty, key: current_school.course_vocabulary %}"
            />
          </div>
        {% endif %}
      </div>
      <div class="col-xs-12 col-sm-3">
        <div id="divContentbyProduct" class="content-by-product">
          <div class="left-content-title">
            Content By Product
          </div>
            {% include "content_by_cards" %}
        </div> 
         <div  style="display: flex;flex-direction: row-reverse;">
          <a id="seemore" >See more..</a>
         </div> 
         <div id="divCalender" class="upcomongevents">
          <div class="left-content-title">
            Upcoming Events
          </div>
          {% include "calendar" %}
         </div>
         <div id="divGetCertified" class="content-by-product">
          <div class="left-content-title">
            Get Certified
          </div>
            {% include "content_by_cards" %}
        </div> 
         <div  style="display: flex;flex-direction: row-reverse;">
          <a id="seemore1" >See more..</a>
         </div> 

      </div>
   
    </div>


    
  </div>
</main>
{% include "footer" %}



<style>

  .left-content-title {
    font-size: 25px;
    font-weight: 900;
    line-height: 15px;
    margin: 20px 0;
   
  }
  .content-by-product {
    height: 300px; 
    overflow: hidden;
  }

  .upcomongevents {
    height: 350px; 
  }

  #seemore:hover {
        cursor: pointer;
  }
  .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;
  }

  .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: 24px;
    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: 100%;
    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;
    }
  }

  @media (min-width:1366px) {

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


  .np-homepage-featured-text {
    align-items: start;
    display: flex;
    flex-direction: column;
   
    text-align: left;
  }


  .np-dashboard-resources-title {
      /* margin-bottom: 8px; */
      color: #333;
      text-transform: unset;
      margin-left: 15px;
  }
</style>
<script>
  $(document).ready(function(){
        $("#seemore").click(function () {
          if ($("#divContentbyProduct").height() == "300")
          {
            $("#divContentbyProduct").height("auto");
            $("#seemore").html("Show less..");
          }
          else
          {
            $("#divContentbyProduct").height("300");
            $("#seemore").html("See more..");
          }
         
          $("#divContentbyProduct").overflow("hidden");
          

      });
    });
</script>