SU-SWS/decanter

{#
/**
 * @file
 * Global Site Search Component
 *
 * A search bar for the website.
 *
 * Available variables:
 * - attributes: For additional HTML attributes not already provided.
 * - modifier_class: Additional css classes to change look and behaviour of the component
 * - action: Action of the form
 * - method: Method of the form
 * - search_label: Custom screen reader label
 * - search_input_name: Name for the search input field. Also used as the "for" attribute of the search input field label.
 * - search_input_id: ID for the search input field. If not provided, it will take on the same value as search_input_name.
 * - search_input_attributes: Additional HTML attributes for the search input field
 * - placeholder: Placeholder text for the search input field
 * - search_button_attributes: Additional HTML attributes for the submit button
 * - search_button_name: The name for the form element. Defaults to 'search'
 * - search_button_text: The user facing text for the button. Defaults to 'Submit Search'
 * - additional_fields: Any additional fields for the search form, e.g., hidden input fields
 *
 */
#}
{%- if search_input_id is empty -%}
  {%- set search_input_id = search_input_name -%}
{%- endif -%}
<div {{ attributes }} class="su-site-search {{ modifier_class }}" role="search">
 <form action="{{ action }}" method="{{ method }}" accept-charset="UTF-8">
  <label class="su-site-search__sr-label" for="{{ search_input_name|default('search-field') }}">{{ search_label|default('Search this site') }}</label>
  <input {{ search_input_attributes }} type="text" id="{{ search_input_id|default('search-field') }}" name="{{ search_input_name|default('search-field') }}" class="su-site-search__input" placeholder="{{ placeholder|default('Search this site') }}" maxlength="128">
  <button {{ search_button_attributes }} type="submit" name="{{ search_button_name|default('search') }}" class="su-site-search__submit su-sr-only-text">{{ search_button_text|default('Submit Search') }}</button>
  {#- Any additional eg. hidden input fields -#}
  {{- additional_fields -}}
 </form>
</div>