{%- if context %}
  {% set search_client_prompt = context.search_client_prompt %}
  {% set search_client_action = context.search_client_action %}
  {% set search_client_results = context.search_client_results %}
  {% set search_client_autofocus = context.search_client_autofocus %}
  {% set search_client_button = context.search_client_button %}
  {% set search_client_button_text = context.search_client_button_text %}
  {% set search_client_script = context.search_client_script %}
  {% set search_client_id = context.search_client_id %}
  {% set search_client_destination_prefix = context.search_client_destination_prefix %}

  {% set id = context.id %}
  {% set modifiers = context.modifiers %}
  {% set override_class = context.override_class %}
{% endif -%}

<form action="{{ search_client_action }}" method="GET" class="vf-form vf-form--search vf-form--search--responsive | vf-sidebar vf-sidebar--end">
  <div class="vf-sidebar__inner">
    <div class="vf-form__item | vf-search__item">
      <label class="vf-form__label vf-u-sr-only | vf-search__label" for="{{ search_client_id }}">{{ search_label }}</label>
      <input type="search" id="search" placeholder="{{ search_client_prompt }}" name="{{ search_client_id }}" class="vf-search__input | vf-form__input" {%- if search_client_autofocus %} autofocus{%- endif %} data-vf-search-client-side-input data-vf-search-client-side-destination-prefix="{{search_client_destination_prefix}}">
    </div>
    {%- if search_client_button -%}
    <button type="submit" class="vf-search__button | vf-button vf-button--primary">
      <span class="vf-button__text">{{ search_client_button_text }}</span>

      <svg class="vf-icon vf-icon--search-btn | vf-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" viewBox="0 0 140 140" width="140" height="140"><g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)"><path d="M23.414,20.591l-4.645-4.645a10.256,10.256,0,1,0-2.828,2.829l4.645,4.644a2.025,2.025,0,0,0,2.828,0A2,2,0,0,0,23.414,20.591ZM10.25,3.005A7.25,7.25,0,1,1,3,10.255,7.258,7.258,0,0,1,10.25,3.005Z" fill="#FFFFFF" stroke="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"></path></g></svg>
    </button>
    {%- endif -%}
  </div>
</form>

{%- if search_client_results %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/lunr.js/2.3.8/lunr.js"></script>
{#- https://lunrjs.com/docs/index.html -#}
<script src="{{ search_client_script }}"></script>
<div class="vf-search-client-side vf-grid | vf-content">
  <div class="results-container" data-vf-search-client-side-results>
    Loading...
  </div>
</div>

<script type="text/javascript">
  window.onload = function () {
    vfSearchClientSide();
  };
</script>
{% endif -%}