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


<main class="np-main np-homepage">
  {% include "homepage_hero_carousel" %}

  <div class="np-subpage-container">
    <div class="row">
      <div class="col-12 col-md-6 col-lg-7">
        <div class="homepage-intro">
          <div class="homepage-intro-headline np-header-font-color">
              {{ homepage.featured_courses_headline }}
          </div>
          <div class="homepage-intro-subheadline">
              {{ homepage.featured_courses_subheadline }}
          </div>
        </div>   
        <div class="row">
          <div class="col-xs-12">
            {% include "video_carousel" %}
          </div>
        </div>   
        <div class="row homepage-cards">
          {% if current_person.signed_in? %} 
            <div class="col-xs-12 col-sm-6">
              <a class="np-card" href="/app/training_events">
                <div class="category-card-container">
                  <img
                    class="np-categories-image"
                    alt="Podcasts"
                    src="https://s3.amazonaws.com/static.northpass.com/J%26J/conference-audience.jpg"
                  >
                </div>
                <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                  <p class="homepage-card-title">Professional Events</p>
                  <p class="homepage-card-desc">Click here to register for upcoming events.</p>
                  <div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
                </div>
              </a>
            </div> 
          {% else %}
            <div class="col-xs-12 col-sm-6">
              <div class="np-card">
                <div class="category-card-container">
                  <img
                    class="np-categories-image"
                    src="https://s3.amazonaws.com/static.northpass.com/J%26J/conference-audience.jpg"
                  >
                </div>
                <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                  <p class="homepage-card-title">Professional Events</p>
                  <p class="homepage-card-desc">Register today and get access to upcoming profressional events.</p>
                </div>
              </div>
            </div>  
          {% endif %}
          <div class="col-xs-12 col-sm-6">
            <a class="np-card" href="/app/catalog">
              <div class="category-card-container">
                <img
                  class="np-categories-image"
                  alt="Podcasts"
                  src="https://s3.amazonaws.com/static.northpass.com/J%26J/JNJ4.png"
                >
              </div>
              <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                <p class="homepage-card-title">Explore All Content</p>
                <p class="homepage-card-desc">Discover all available topics</p>
                <div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
              </div>
            </a>
          </div>
          <div class="col-xs-12 col-sm-6">
            <a class="np-card" href="/app/catalog?category=productinformation">
              <div class="category-card-container">
                <img
                  class="np-categories-image"
                  alt="Podcasts"
                  src="https://s3.amazonaws.com/static.northpass.com/J%26J/white_beard_eye_exam.jpg"
                >
              </div>
              <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                <p class="homepage-card-title">Product Information</p>
                {% comment %} <p class="homepage-card-desc"></p> {% endcomment %}
                <div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
              </div>
            </a>
          </div>
          {% if current_person.signed_in? %}
            <div class="col-xs-12 col-sm-6">
              <a class="np-card" href="/app/dashboard">
                <div class="category-card-container">
                  <img
                    class="np-categories-image"
                    alt="Podcasts"
                    src="https://s3.amazonaws.com/static.northpass.com/J%26J/couple_ipad_podcast.jpg"
                  >
                </div>
                <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                  <p class="homepage-card-title">My Topics</p>
                  <p class="homepage-card-desc">Tailored content based on your area of expertise</p>
                  <div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
                </div>
              </a>
            </div>
            
          {% else %}
            <div class="col-xs-12 col-sm-6">
              <div class="np-card">
                <div class="category-card-container">
                  <img
                    class="np-categories-image"
                    alt="Podcasts"
                    src="https://s3.amazonaws.com/static.northpass.com/J%26J/couple_ipad_podcast.jpg"
                  >
                </div>
                <div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
                  <p class="homepage-card-title">My Topics</p>
                  <p class="homepage-card-desc">Tailored content based on your area of expertise</p>
                </div>
              </div>
            </div>
          {% endif %}
        </div>
        
        {% comment %} {% include "homepage_category_cards", class: "col-xs-12 col-sm-6" %} {% endcomment %}
      </div>
      <div class="col-0 col-lg-1"></div>
      <div class="col-12 col-md-6 col-lg-4">
         {% include "homepage_login_registration" %}
       <a href="https://app.smartsheet.com/b/form/36c0f66e21ff4bf8b833bb4bbbf0b635" class="sidebar-content-block contact-block" target="_blank">
          <p class="sidebar-header">Contact Us </p>
          
          <div class="sidebar-desc">Click here to contact us for more information&nbsp;&nbsp;<i class=" arrow-icon fal fa-long-arrow-right"></i></div>
          {% comment %} <div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div> {% endcomment %}
      </a>       
      </div>
    </div>
  </div>
</main>

{% include "footer" %}

<style>
  .sidebar-content-block,
  .sidebar-content-block:hover {
    background: #f3f3f3;
    padding: 32px;
    color: #212121;
    display: block;
    margin-bottom:32px;
        text-decoration: none;
  }

  .sidebar-header,
  .welcome-block-header,
  .block-header {
    font-size: 20px;
    font-weight: 700;
  }

  .sidebar-content-block .arrow-icon {
    text-align: right;
    margin-top: 12px;
  }

   .sidebar-content-block .arrow-icon .fa-long-arrow-right,
   .sidebar-desc .arrow-icon {
    color: #009999;
    font-size: 32px;
    
  }

  .sidebar-desc .arrow-icon {
        margin-top: 0!important;
    position: relative;
    top: 5px;
    left: 5px;
  }

  .homepage-cards .np-card {
  padding:0 0 32px;
  display: flex;
  flex-direction: column;
  text-decoration:none;
}

.category-card-container {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.category-card-container img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.np-categories-content {
  color: #212121;
  background: #f3f3f3;
  font-size: 18px;
  flex:2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.np-categories-content p {
  margin:0;
}

.np-categories-content .arrow-icon {
  text-align:right;
  margin-top:12px;
}

.np-categories-content .arrow-icon i {
  color: #009999;
  font-size: 32px;
}

p.homepage-card-title {
  color:  #212121;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px!important;
}

p.homepage-card-desc {
  line-height:normal;
}


</style>