{% 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 np-catalog-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-catalog np-subpage-container np-max-width">
  <div class="np-catalog-header-wrapper">
    <div class="np-catalog-header">
      <div class="np-resource-title">{{ catalog.headline }}</div>
      <div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
    </div>
    {% capture label %}{% t shared.filters.by_category %}{% endcapture %}

    {% if courses.in_catalog.any? %}
      {%
        include "filter_dropdown",
        filters: courses.filters,
        key: "category_uuid",
        label: label
      %}
    {% endif %}
  </div>
  {% include "courses_catalog" %}
</main>
{% include "footer" %}

<style>
  .np-header{
    margin-top: 0 !important;
  }

  .np-catalog-hero-image{
    height: 235px;
  }

  @media screen and (min-width: 768px){
    .np-catalog-hero-image{
      min-height: 235px;
    }
  }
</style>