{% include "header" %}
{% include "sub_navigation" %}
<main class="np-main np-search np-subpage-container np-max-width">
  <div class="Search np-resource-title">
    {% t .title %}
  </div>
  <div class="np-search-header">
    <div class="Search np-resource-subtitle">
      {% t .showing %}
      <span class="np-resource-subtitle-number">{{ results.count }}</span>
      {% t .results_for %}
      <span class="np-button-color">"{{ results.term }}"</span>
    </div>
  </div>
  {% if results.items.any? %}
    {% render "search_result" for results.items as result, catalog_courses: courses.in_catalog %}
  {% else %}
    {% include "search_zero_state" %}
  {% endif %}
</main>
{% include "footer" %}

{% if current_person.properties.hide_api_certification_exam_course == true %}
  <style>
    .np-search-result[data-id='6cc26c57-34db-4b8e-a38b-ad321ce18add'],
    .np-search-result[data-id='ac4fbf2e-ed8f-404d-b995-f0ef73481466'] {
      display:none;
    }
  </style>
{% endif %}

<style>
  .np-sub-navigation-content {
    margin-bottom:12px;
  }

  .np-search .np-resource-title {
    color:#000;
    font-weight:900;
  }

  .category-pills {
    display:flex;
    flex: 1;
    justify-content: end;
    align-items: flex-end;
  }

  .cat-item {
    background-color:#3c228a;
    color:#fff;
    font-weight:500;
    font-size:12px;
    padding: 4px 10px;
    border-radius: 12px;
  }

  @media (min-width:768px) {
    .np-search .np-resource-title {
      font-size: 32px;
      line-height: normal;
    }
  }
</style>

<script>
  window.addEventListener("load", function() {
    const searchResultsLength = document.querySelectorAll(".np-search-result").length

    document.querySelector(".np-resource-subtitle-number").innerText = searchResultsLength
  })
</script>