{% include "mobile_header", title: "Search", back_icon: "fa-arrow-left", back_link: "javascript: goBack()" %}
{% include "sub_navigation" %}

<main class="np-main np-search np-subpage-container np-max-width">
  <div class="np-header-search np-catalog-search np-header-search-expanded">
    <form action="{% route search %}" method="get" data-test="desktop-search">
     
      <input
        aria-label="Search courses"
        class="np-header-search-input np-header-font-background-color"
        type="text"
        name="q"
        placeholder="Search"
      />
       <i class="np-header-search-icon far fa-search"></i>
    </form>
  </div>
  <div class="np-search-header">
    <div class="np-resource-subtitle">
      <span class="np-resource-subtitle-number">{{ results.count }}</span>
      {% t .results_for %}
      <span class="results-term">"{{ results.term }}"</span>
    </div>
  </div>
  
  {% if results.items.any? %}
  <div class="search-results-list">
    {% render "search_result" for results.items as result %}
  </div>   
  {% else %}
    <div class="np-card np-search-zero-state">
      <div class="np-card-container">
        <div class="np-card-content np-card-content-vertical np-search-zero-state-card">
          <div class="search-zero-state-img"></div>
          <div class="np-zero-state-text">
            <div class="zero-state-header">No results found</div>
            <div>Please try another search item.</div>
          </div>      
        </div>
      </div>
    </div>
  {% endif %}
</main>

<script>
$(document).ready(function() {
  const term = '{{ results.term }}'
  sortSearchResultsByTerm(term)

  const resultsCount = document.querySelector(".np-resource-subtitle-number")
  const allResults = document.querySelectorAll(".np-search-result")
  resultsCount.innerHTML = allResults.length
})
</script>