{% sw_extends '@Storefront/storefront/layout/header/search.html.twig' %}

{% set searchWidgetOptions = { searchWidgetMinChars: shopware.minSearchLength } %}

{% block layout_header_search %}
	<div class="collapse" id="searchCollapse">
		<div class="header-search">
			{% block layout_header_search_form %}
				<form action="{{ path('frontend.search.page') }}" method="get" data-search-widget="true" data-search-widget-options="{{ searchWidgetOptions|json_encode }}" data-url="{{ path('frontend.search.suggest') }}?search=" class="header-search-form js-search-form">

					{% block layout_header_search_input_group %}
						<div class="input-group">
							{% block layout_header_search_input %}
								{{ parent() }}
							{% endblock %}
							{% block layout_header_search_button %}
								{{ parent() }}
							{% endblock %}
							{% block layout_header_close_button %}

								<button class="btn search-toggle-btn js-search-toggle-btn collapsed js-search-close-btn" type="button" data-bs-toggle="collapse" data-bs-target="#searchCollapse" aria-expanded="false" aria-controls="searchCollapse" aria-label="{{ "header.searchButton"|trans|striptags }}">
									<span class="icon icon-collpase">
										<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
											<path d="M25.333 5.333q0.573 0 0.953 0.38t0.38 0.953q0 0.563-0.385 0.948l-8.396 8.385 8.396 8.385q0.385 0.385 0.385 0.948 0 0.573-0.38 0.953t-0.953 0.38q-0.563 0-0.948-0.385l-8.385-8.396-8.385 8.396q-0.385 0.385-0.948 0.385-0.573 0-0.953-0.38t-0.38-0.953q0-0.563 0.385-0.948l8.396-8.385-8.396-8.385q-0.385-0.385-0.385-0.948 0-0.573 0.38-0.953t0.953-0.38q0.563 0 0.948 0.385l8.385 8.396 8.385-8.396q0.385-0.385 0.948-0.385z"></path>
										</svg>
									</span>
								</button>
							{% endblock %}
						</div>
					{% endblock %}
				</form>
			{% endblock %}
		</div>
	</div>
{% endblock %}
