<div class="bc-search-header">
    <div class="bc-search-header--content">
      <H1 class="bc-search-header--heading"> SEARCH RESULTS </h1>
      <!-- Search bar -->
<template id="bc-search-results--hint__template">
  <div class='bc-searchbar-preview--line' data-url='{{url}}' tabindex="0">{{{title}}}</div>
</template>

<div
  class="bc-searchbar "
  data-module="bc-searchbar"
  data-search-url="http://localhost:1978"
  data-search-min-char="3"
  data-search-items-per-page="10"
  data-search-preview-limit="5"
  data-search-delay-ms="500"
  data-view-all-search-results-url="http://localhost:3000/components/BcSearch/BcSearchResultsPage.html"
  aria-label="Search"
>
  <!-- Search text entry -->
  <div class="bc-searchbar-searchIcon bc-searchbar-searchIcon--back"  tabindex="0">
    <svg class="icon" aria-hidden="true">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/nswbc/svg/svg.svg#chevron"></use>
    </svg>
  </div>
  
  <input placeholder="Search" aria-label="To search the site, type a search term and click enter"/>

  <div class="bc-searchbar-searchIcon bc-searchbar-searchIcon--search" tabindex="0" aria-label="To search the site, click enter and then type a search term">
    <svg class="icon" aria-hidden="true">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/nswbc/svg/svg.svg#search"></use>
    </svg>
  </div>
  <div class="bc-searchbar-searchIcon bc-searchbar-searchIcon--close" tabindex="0" aria-label="Close Search">
    <svg class="icon" aria-hidden="true">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/nswbc/svg/svg.svg#close"></use>
    </svg>
  </div>
  <div class="bc-searchbar-refine">
    <label for="refine">Refine</label>
    <select id="refine" >
      <option value="">Select category</option>
      <option value="business">Business</option>
    </select>
    <div class="bc-searchbar-searchIcon bc-searchbar-searchIcon--refine">
      <svg class="icon" aria-hidden="true">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/nswbc/svg/svg.svg#chevron"></use>
      </svg>
    </div>
  </div>
  <!-- Search results preview -->
  <div class="bc-searchbar-preview">
    <div class="bc-searchbar-viewall" tabindex="0">
      <span>VIEW ALL SEARCH RESULTS</span>
    </div>
  </div>
</div>
<!-- End Search bar -->
    </div>
  </div>
  
  <div class="bc-searchbar-results">

    <template id="bc-search-results--breadcrumb__template">
      <span class="bc-search-results--breadcrumb"><a x-cq-linkchecker=“skip” href="{{url}}">{{title}}</a></span>
    </template>
    


    <template id="bc-search-results__template">
      {{#each results}}
        <div class="bc-searchbar-results--result">
          <div class="bc-searchbar-results--breadcrumbs">
            {{#each breadcrumbDetails}}
              <span class="bc-searchbar-results--breadcrumb">
                <a href="{{url}}">{{title}}</a>
                <div class="bc-searchbar-results--breadcrumb--seperator">
                  <svg class="icon" aria-hidden="true">
                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/nswbc/svg/svg.svg#chevron"></use>
                  </svg>
                </div>
              </span>
            {{/each}}
          </div>
          {{#if premium }}
            <img class="bc-searchbar__premium-icon" src="/assets/nswbc/img/theme/nswbc/bc-paywall/Premium-Circle-Red.svg"/>
          {{/if}}
          <a x-cq-linkchecker=“skip” href="{{url}}" data-index="{{@index}}"><H2 class="bc-searchbar-results--heading">{{{title}}}</H2></a>
          <div class="bc-searchbar-results--description">{{{description}}}</div>
        </div>
      {{/each}}
    </template>
    <template id="bc-searchbar-paginginfo__template">
      Showing <strong>{{start}}-{{finish}}</strong> of {{total}} results
    </template>
    <div class="bc-searchbar-paginginfo">
    </div>
    <div class="bc-searchbar-results--content">
    </div>
    <template id="bc-searchbar-pager__template">
      {{#each pages}}
        <div>
          <a x-cq-linkchecker=“skip” href="{{url}}" data-page-number="{{pageNumber}}">{{page}}</a>
        </div>
      {{/each}}
    </template>
    <div class="bc-searchbar-pager">
      <div class="bc-searchbar-pager--prev"><a x-cq-linkchecker=“skip” href="">PREV</a></div>
      <div class="bc-searchbar-pager--pages"></div>
      <div class="bc-searchbar-pager--next"><a x-cq-linkchecker=“skip” href="">NEXT</a></div>
    </div>
  </div>