{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.featured %}
<main class="np-main np-homepage">
  <div class="np-homepage-hero">
    <img class="np-homepage-hero-image"
      src="{{ homepage.artwork_url }}"
      alt="{{ homepage.headline }}"
    />
    <div class="np-homepage-hero-content">
      <div class="np-homepage-headline np-header-font-color homepage-heading">
        {{ homepage.headline }}
      </div>
      <div class="np-homepage-subheadline np-header-font-color">
        {{ homepage.subheadline }}
      </div>
      {%- comment -%} <a class="np-homepage-hero-cta np-button" href="{% route catalog %}">
        {% t .discover %}
      </a> {%- endcomment -%}
    </div>
  </div>
  {% include "sub_navigation" %}

{%- comment -%} PROMO VIDEO SECTION (PLACEHOLDER) {%- endcomment -%}
  <div class="homepage-promo-video-container">
    <div class="homepage-promo-video-wrapper">
      {%- comment -%} <iframe src="https://www.loom.com/share/e242bc3304ee42f5b710779cc262a934?sid=2bcb3503-8f03-4961-be9b-2ac6e47c29c5"  frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="height: 100%; width: 100%;"></iframe> {%- endcomment -%}
      <video src="{{ '380bd4b5-82f0-4764-93e3-ac0e31cfae64' | asset_url }}" controls autoplay muted style="width: 100%;"></video>
    </div>
  </div>  

{% assign render = true %}
{% for group in current_person.groups %}
  {% if group.id == '4919c56f-cda3-4f31-911c-f092536a7e68' %}
    {% assign render = false %}
  {% endif %}
{% endfor %}

{% if render %}
  {%- comment -%} "GET STARTED BASED ON YOUR PERSONA" CATEGORY CARDS {%- endcomment -%}
  {% include "section_category_personas" %}

  {%- comment -%} FEATURED COURSES SECTION {%- endcomment -%}
  <div class="homepage-section np-homepage-featured np-max-width">
    <div class="np-homepage-featured-text">
      <div class="np-homepage-headline homepage-heading">
        {{ homepage.featured_courses_headline }}
      </div>
    </div>
    {% if courses.featured.any? %}
      {% 
        include "featured_courses_carousel", 
        items: courses.featured
      %}
    {% 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>
{% endif %}

  {%- comment -%} POPULAR TOPICS CATEGORIES SECTION {%- endcomment -%}



  {%- comment -%} UPCOMING EVENTS SECTION {%- endcomment -%}

  {% include "training_events_dashboard" %}

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

<style>
  .np-homepage-featured-text{
    background: #7DBAF8;
    padding: 15px 0;
  }

  .np-max-width{
    width: 100%;
  }

  .homepage-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

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

  .np-homepage-hero-image{
    object-fit: fill;
  }

  .homepage-heading {
    align-items: center;
    display: flex;
    font-size: 2.5rem !important;
  }

  .homepage-promo-video-container{
    background: #004688;
    /* height: 250px; */
    width: 100%;
  }

  .homepage-promo-video-wrapper{
    /* background: #6ba400;
    height: 100%;
    width: 100%; */
  }
  .bqUfwS{
  display:none !important;
  }
  @media screen and (min-width: 768px){
    .np-homepage-hero-image{
      object-fit: contain;
    }

    .homepage-promo-video-container{
      /* height: 540px; */
      padding: 2% 20%;
    }

    .np-homepage-featured{
      margin: 0;
    }

    .np-homepage-featured-text{
      align-self: center;
      padding: 18px 64px;
      width: 100vw;
    }
  }
</style>