<div class="np-filter" tabindex="0">
  <div class="dropdown">
    <select
      class="category-filter-dropdown np-input"
      type="text"
      name="category-filter-dropdown"
      id="category-filter-dropdown"
      onchange="filterCatalog()"
    >
      {% assign sorted_categories = current_school.filterable_categories | sort: "name" %}
      <option class="category-filter-entry" value="" selected disabled>All Categories</option>

      <option class="category-filter-entry" value="0">All Categories</option>
      {% for category in sorted_categories %}
        <option class="category-filter-entry" value="{{ category.id }}">{{ category.name }}</option>
      {% endfor %}
    </select>

  </div>
</div>

<script>
  let filterCatalog = () => {
    console.log(event.target.value);
    if(event.target.value.length > 0){
      if(event.target.value == 0){
        window.location.href = '/app'
      } else {
        window.location.href = `/app?filter[category_uuid][in][]=${event.target.value}`
      }
    } 
  }
</script>