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

{% block layout_header %}
	{% block layout_top_bar %}
		
	{% endblock %}

	{% block layout_header_navigation %}
		{% set activateTopBar = theme_config('topbar-activate') %}	
		<div class="header-two">
			<div class="row align-items-center header-row">
				{% block layout_header_logo %}
					<div class="col-auto col-lg-auto header-logo-col">
						{% sw_include '@Storefront/storefront/layout/header/logo.html.twig' %} 
					</div>
				{% endblock %}
				{% block layout_header_actions %}
					<div class="col-12 order-1 col-sm-auto order-sm-2 header-actions-col">
						<div class="row cart-set {{ gridNoGuttersClass }}">
							{% block layout_header_navigation_toggle %}
								<div class="col d-sm-block d-xl-none">
									<div class="menu-button">
										{% block layout_header_navigation_toggle_button %}
											{{parent()}}
										{% endblock %}
									</div>
								</div>
							{% endblock %}
							{% block layout_header_search_toggle %}
								<div class="col-auto d-block">
									<div class="search-toggle">
										<button class="btn header-actions-btn search-toggle-btn js-search-toggle-btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#searchCollapse" aria-expanded="false" aria-controls="searchCollapse" aria-label="{{ "header.searchButton"|trans|striptags }}">
											<span class="bc-header-search-icon">
												<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 22.24 18.9">
													<defs>
														<style>
															.cls-1 {
																fill: #fff;
															}
														</style>
													</defs><path class="cls-1" d="M20.28,17.37l-2.63-2.63A9,9,0,1,0,16.38,16L19,18.64a.92.92,0,0,0,1.28,0A.9.9,0,0,0,20.28,17.37ZM3.5,9.05a7.19,7.19,0,1,1,7.19,7.2A7.2,7.2,0,0,1,3.5,9.05Z"/></svg>
											</span>
										</button>
									</div>
								</div>
							{% endblock %}
							{% if config('core.cart.wishlistEnabled') %}
								{% block layout_header_actions_wishlist %}
									{{parent()}}
								{% endblock %}
							{% endif %}
							{% block layout_header_actions_account %}
								{{parent()}}
							{% endblock %}
							{% block layout_header_actions_cart %}
								{{parent()}}
							{% endblock %}
						</div>
						{% if activateTopBar %}
							<button class="btn header-actions-btn-toggle search-toggle-btn js-search-toggle-btn collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#topbarCollapse" aria-expanded="false" aria-controls="topbarCollapse" aria-label="{{ "header.searchButton"|trans|striptags }}">
								<span class="icon icon-collpase">
									<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewbox="0 0 24 24">
										<defs>
											<path d="M10 4c0-1.1046.8954-2 2-2s2 .8954 2 2-.8954 2-2 2-2-.8954-2-2zm0 8c0-1.1046.8954-2 2-2s2 .8954 2 2-.8954 2-2 2-2-.8954-2-2zm0 8c0-1.1046.8954-2 2-2s2 .8954 2 2-.8954 2-2 2-2-.8954-2-2z" id="icons-default-more-vertical"></path>
										</defs>
										<use xlink:href="#icons-default-more-vertical" fill="#758CA3" fill-rule="evenodd"></use>
									</svg>
								</span>
							</button>
						{% endif %}
					</div>
				{% endblock %}
			</div>
			
			<div class="nav-main d-none d-md-flex">
				{% sw_include '@Storefront/storefront/layout/navbar/navbar.html.twig' %}
			</div>	
		</div>
		{% block layout_header_search %}
			<div class="col-12 order-2 col-sm order-sm-1 header-search-col">
				<div class="col-sm-auto d-none">
					{% block layout_header_navigation_toggle_tablet %}
						{{parent()}}
					{% endblock %}
				</div>
				<div class="col">
					{% sw_include '@Storefront/storefront/layout/header/search.html.twig' %}
				</div>
			</div>
		{% endblock %}
	{% endblock %}
{% endblock %}
