{% include "modified_header" %}

<div class="np-hidden-desktop">
  <div class="np-header-mobile-menu-content np-hidden">
    {% if current_person.signed_in? %}
      <img
        alt="{{ current_person.name }}"
        class="np-header-mobile-menu-content-avatar"
        src="{{ current_person.avatar_url }}"
      />
      <div class="np-header-mobile-menu-content-name">
        {{ current_person.name }}
      </div>
    {% endif %}
    <div class="np-header-mobile-menu-content-nav">
      <form
        class="np-header-search"
        data-test="mobile-search"
        method="get"
        action="{% route search %}"
      >
        <input
          aria-label="{% t .search %}"
          class="np-header-search-input"
          type="text"
          name="q"
          placeholder="{% t .search %}"
        />
        <i class="np-header-search-icon far fa-search"></i>
      </form>
      {% for website_navigation in navigations.header_navigations %}
        <a
          href="{{ website_navigation.path }}"
          class="np-header-mobile-menu-content-button"
          {% if website_navigation.external? %} target="_blank" {% endif %}
        >
          {{ website_navigation.name }}
        </a>
      {% endfor %}
      <div class="np-header-mobile-menu-content-line"></div>
      {% unless current_school.sso_active? %}
        <a
          class="np-header-mobile-menu-content-button"
          href="{% route account %}"
        >
          Profile Settings
        </a>
      {% endunless %}
      <a
        class="np-header-mobile-menu-content-button np-danger"
        href="{% route logout %}"
      >
        Sign Out
      </a>
    </div>
  </div>
</div>

{% include "messages" %}
{% include "course_version_outdated_alert", courses: courses.enrolled %}

<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.headline }}
    </div>
    <div class="np-homepage-subheadline np-header-font-color">
      {{ homepage.subheadline }}
    </div>
  </div>
</div>

{% include "sub_navigation" %}
<main class="np-main np-training-events np-subpage-container np-max-width">
  <div class="row">
    <div class="col-xs-12 col-sm-10">
      <div class="np-resource-title">
        {% t .title %}
      </div>
      <div class="np-resource-subtitle">
        {% t .subtitle %}.
      </div>
    </div>
    <div class="col-xs-12 col-sm-2">
      {% include "training_events_filter" %}
    </div>
  </div>
  {% include "training_events_index" %}
</main>
{% include "footer" %}

<style>
  .np-homepage-hero{
     background: #34abe2;
     margin-top: -4rem;
     z-index: -1; 
  }
    /* @media screen and (min-width: 300px) {
    .np-homepage-hero{
      background: #34abe2;
      height: 7rem;
    }

    .np-homepage-hero-content{
      padding: 2.25rem 2.75em;
    }
  }

  @media screen and (min-width: 365px) {
    .np-homepage-hero-content{
      padding: 2.25rem 3.2rem;
    }
  }

  @media screen and (min-width: 550px) {
    .np-homepage-hero{
      height: 4rem;
    }
  }

  @media screen and (min-width: 768px) {
    .np-header{
      height: 130px;
    }

    .np-homepage-hero{
      background: transparent;
      margin-top: -3rem;
      margin-bottom: -1rem;
    }
  }

  @media screen and (min-width: 992px) {
    .np-homepage-hero{
      margin-top: -6rem;
      margin-bottom: 0;
      height: 6rem
    }
  }

  @media screen and (max-width: 1024px) {
    .progress-section {
      padding-left: 0.5rem
    }
  }

  @media screen and (min-width: 1200px) {
    .np-homepage-hero{
      margin-top: -7rem;
      margin-bottom: 0;
    }
  } */

  .np-sub-navigation{
    margin-bottom: 0 !important;
  }

  /* @media only screen and (min-width: 768px) {
    body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "header" "subnav" "main" "footer" "powered";
    grid-template-rows: 120px 50px 1fr 160px 60px;
    }
    header {
      grid-area: header;
    }
    nav {
      grid-area: subnav;
    }
    main {
      grid-area: main;
      margin-top: 0 !important;
    }
    footer {
      grid-area: footer;
    } */
    /* .np-header{
      height: 85px;
    } */
    /* .np-powered-by {
      grid-area: powered;
    }
  } */
</style>