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

<main class="np-main np-catalog np-subpage-container np-max-width">
  <div class="np-catalog-header-wrapper catalog-header-wrapper">

    <div class="np-catalog-header">
      <div class="np-resource-title catalog-title">Catalog</div>
    </div>
    <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="Search Topics"
      />
      <i class="far fa-search search-icon"></i>
    </form>
  </div>

  <div class="filter-buttons-container">
    {% 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>

  {% 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: #000000;
    font-size: 32px;
    font-weight: 400;
    line-height: 25px;
    margin-bottom: 30px;
  }

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

  .catalog-search{
    border: 1px solid #D9D9D9;
    height: 60px;
    padding-left: 75px;
    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){
    .np-catalog-courses{
      margin: 0;
      max-width: 100%;
    }
    
    .np-subpage-container{
      padding: 50px 24px 184px;
    }

    .dropdown-menu{
      left: 0;
      right: unset;
    }
  }
</style>