{% include "header_absolute" %}
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
<div class="basic-hero has-image">
  <div class="hero-content">
    <div class="np-resource-title">{{ catalog.headline }}</div>
    <div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
    <form
        class="np-header-search hero-search"
        data-test="mobile-search"
        method="get"
        action="{% route search %}"
      >
        <input
          aria-label="Search"
          class="np-header-search-input hero-search-input"
          type="text"
          name="q"
          placeholder="Search"
        />
        <i class="np-header-search-icon far fa-search"></i>
      </form>
  </div>
</div>
<div class="category-dropdown-section">
  <div class="np-max-width">
    <div class="category-dropdown">
      <select id="categorySelect">
        <option value="all">Show All</option>
        {% for cat in categories.in_catalog %}
          <option value="{{cat.id}}">{{cat.name}}</option>
        {% endfor %}
      </select>
    </div>
  </div>
</div>
<main class="np-main np-catalog np-subpage-container np-max-width">
  {% include "courses_catalog" %}
</main>
{% include "footer" %}

<style>

.category-dropdown-section {
  background-color: #fafafa;
  padding: 32px 0;
} 

.category-dropdown {
  max-width:400px;
}

.category-dropdown select {
  width: 100%;
  height: 45px;
  border-radius: 6px;
  background: #f3f3f3;
  padding: 6px;
  font-weight: 700;
  font-size: 14px;
  text-transform:uppercase;
}

</style>

<script>
  $('#categorySelect').on('change', function() {
    let selectedValue = this.value

    if (selectedValue == "all") {
      $(".course-column").show()
    } else {
      $(".course-column").hide()
      $(".course-column").each(function() {
        if ($(this).data("id").includes(selectedValue)) {
          $(this).show()
        }
      })
    }
  });
</script>