{% include "header" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}

<div class="np-homepage-hero">
  <img class="np-homepage-hero-image"
    src="https://s3.amazonaws.com/static.northpass.com/anthology/hero.svg"
    alt="{{ homepage.headline }}"
  />
  <div class="np-homepage-hero-content">
    <div class="np-homepage-headline np-header-font-color">
      Welcome to Anthology Academy
    </div>
    <div class="np-homepage-subheadline np-header-font-color" style="line-height: 28px; margin: 8px auto 0; text-align: center; width: 60%;">
      Benefit from expert training and on-demand learning content to improve skills and ensure your team is getting the best Anthology experience possible.
    </div>
  </div>
</div>
<main class="np-main np-catalog np-subpage-container np-max-width">
  <div class="mobile-subnav" style="margin: -24px -20px 16px;">
    {% include "sub_navigation" %}
  </div>

  <div class="np-catalog-header-wrapper catalog-header-wrapper">

    <div class="np-catalog-header">
      <div class="np-resource-title catalog-title">Catalog</div>
      <div class="catalog-subtitle">Explore our collection of learning resources</div>
    </div>

    <div class="search-and-filter-component">
      <div class="catalog-search-component">
        <span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Search: </span>
        <form action="{% route search %}" method="get" data-test="desktop-search" class="catalog-search-wrapper">
          <input
            aria-label="search_topics"
            class="np-header-font-background-color catalog-search"
            type="text"
            name="q"
            placeholder=""
          />
          <i class="far fa-search search-icon"></i>
        </form>
      </div>

      <div class="catalog-filter-component">
        <span style="color: #757575; margin-bottom: 10px; padding-left: 5px;">Filter By:</span>
        <div class="filter-buttons-container">
          {%- comment -%} <span class="homepage-resource-header" style="
            font-size: 18px;
            margin-bottom: 0;
            margin-right: 15px;
          ">Filter By: </span> {%- endcomment -%}
          {% include "filter_by_product", page: 'Homepage' %}

          {% capture label %}{% t shared.filters.by_category %}{% endcapture %}
          {% if current_school.filterable_categories.any? %}
            {%
              include "filter_by_category",
              label: label
            %}
          {% endif %}
        </div>
      </div>
    </div>

  </div>


  {% assign renderPopular = false %}
  {% assign totalCount = 0 %}
  {% if courses.enrolled.any? %}
    {% for course in courses.enrolled %}
      {% if course.properties.most_popular == true %}
        {% assign totalCount = totalCount | plus : 1  %}
        {% assign renderPopular = true %}
      {% endif %}
    {% endfor %}
  {% endif %}

  {% if renderPopular == true %}
    {%- comment -%} {% if totalCount > 3 %}
      {% include "popular_courses_carousel" %}
    {% else %}
    {% endif %} {%- endcomment -%}
    {% include "popular_courses_non_carousel" %}
  {% endif %}

  {% if courses.enrolled.any? %}
    {% include "courses_catalog" %}
  {% else %}
    {% capture message %}
      {% t shared.zero_state.courses.catalog,
        key: current_school.course_vocabulary
      %}
    {% endcapture %}
    
    {% include "courses_zero_state", message: message %}
  {% endif %}
  
</main>
{% include "footer" %}

<style>
  .catalog-header-wrapper{
    display: flex;
    flex-direction: column;
  }

  .catalog-title{
    color: #0A0A0A;
    font-size: 2em;
    font-weight: 900;
    line-height: 2.375rem;
    margin-bottom: 12px;
  }

  .catalog-subtitle{
    color: #595959;
    font-size: 1.25em;
    font-weight: 400;
    margin-bottom: 24px;
  }

  .search-and-filter-component{
    align-items: flex-start;
    display: flex;
    flex-direction: column;
  }

  .catalog-search-wrapper{
    position: relative;
  }

  .catalog-search-component,
  .catalog-filter-component{
    display: flex; 
    flex-direction: column;
  }

  .catalog-search-component{
    margin-bottom: 15px;
    width: 100%;
  }

  .catalog-search{
    background-color: #fefefe;
    border: 1px solid #ce9dc7;
    border-radius: 30px;
    font-weight: 400;
    height: 60px;
    line-height: 1;
    padding-left: 75px;
    text-decoration: none;
    width: 100%;
  }

  .search-icon{
    left: 30px;
    position: absolute;
    top: 23px;
  }

  .homepage-resource-header{
    color: #000000;
    font-size: 24px;
    font-weight: 600;
    line-height: 25px;
    margin-bottom: 12px
  }

  @media screen and (min-width: 768px){
    .mobile-subnav{
      display: none;
    }

    .search-and-filter-component{
      align-items: center;
      flex-direction: row;
    }

    .np-catalog-courses{
      margin: 0;
      max-width: 100%;
    }
    
    .np-subpage-container{
      padding: 50px 50px 184px;
    }

    .dropdown-menu{
      left: 0;
      right: unset;
    }

    .catalog-search-component{
      margin-bottom: 0;
      margin-right: 50px;
      width: 65%;
    }
  }

  @media screen and (min-width: 1440px){
    .np-homepage-hero{
      width: calc(100vw + 1.75em);
      position: absolute;
      left: 0;
    }

    .catalog-header-wrapper{
      margin-top: 300px;
    } 
  }

  @media screen and (min-width: 2200px){
    .catalog-header-wrapper{
      margin-top: 350px;
    }
  }

  @media screen and (min-width: 2500px){
    .catalog-header-wrapper{
      margin-top: 400px;
    }
  }
</style>