Search

{#
	{% include '@partial-search' with {
		modifier: 'modifier',
		aria_label: 'Site Search',
		label: 'Search',
		placeholder: '',
		button_text: 'Submit'
	} %}
#}

{% set id = uniqid('site-search') %}

<div
	class="site-search{% if modifier %} site-search--{{ modifier }}{% endif %}"
	id="{{ id }}"
	role="search"
	itemscope
	itemtype="https://schema.org/WebSite"
	aria-labelledby="{{ id ~ '_title' }}"
>
	<meta itemprop="url" content="http://{{ config.domain }}">
	<h2 class="site-search__title" id="{{ id ~ '_title' }}">
		Site Search
	</h2>
	<form
		class="site-search__form"
		action="/components/preview/template-search"
		itemprop="potentialAction"
		itemscope
		itemtype="http://schema.org/SearchAction"
	>
		<meta
			itemprop="target"
			content="http://{{ config.domain }}/components/preview/template-search?q={q}"
		>
		<label class="site-search__label" for="{{ id ~ '_input' }}">
			{{ label ?: 'Search' }}
		</label>
		<div class="site-search__field">
			<input
				class="site-search__input"
				id="{{ id ~ '_input' }}"
				itemprop="query-input"
				type="search"
				name="q"
				{% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
				required
			>
			<div class="site-search__submit">
				{% include '@partial-button' with {
					classes: {
						base: 'button-bordered'
					},
					id: id ~ '_button',
					attributes: {
						'aria-labelledby': id ~ '_title ' ~ id ~ '_button',
						'type': 'submit'
					},
					title: button_text,
					icon: 'search'
				} only %}
			</div>
		</div>
	</form>
</div>