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

{% block layout_header %}
	{% block layout_top_bar %}
		{% sw_include '@Storefront/storefront/layout/header/top-bar.html.twig' %}
	{% endblock %}

	{% block layout_header_navigation %}
		<div class="row align-items-center header-row">
			{% block layout_header_logo %}
				<div class="col-12 col-lg-auto header-logo-col pb-sm-2 my-3 m-lg-0">
					{% sw_include '@Storefront/storefront/layout/header/logo.html.twig' %}
				</div>
			{% endblock %}

			{% block layout_header_search %}
				<div class="col-12 order-2 col-sm order-sm-1 header-search-col">
					<div class="row">
						<div class="col-sm-auto d-none d-sm-block d-lg-none">
							{% block layout_header_navigation_toggle_tablet %}
								<div class="nav-main-toggle">
									{% block layout_header_navigation_toggle_tablet_button %}
										<button class="btn nav-main-toggle-btn header-actions-btn" type="button" data-off-canvas-menu="true" aria-label="{{ 'general.menuLink'|trans|striptags }}">
											{% block layout_header_navigation_toggle_tablet_button_icon %}
												{% sw_icon 'stack' %}
											{% endblock %}
										</button>
									{% endblock %}
								</div>
							{% endblock %}
						</div>
						<div class="col">
							{% sw_include '@Storefront/storefront/layout/header/search.html.twig' %}
						</div>
					</div>
				</div>
			{% endblock %}

			{% block layout_header_actions %}
				<div class="col-12 order-1 col-sm-auto order-sm-2 header-actions-col">
					<div class="header-row row">
						{% block layout_header_navigation_toggle %}
							<div class="col d-sm-none">
								<div class="menu-button">
									{% block layout_header_navigation_toggle_button %}
										<button class="btn nav-main-toggle-btn header-actions-btn" type="button" data-off-canvas-menu="true" aria-label="{{ 'general.menuLink'|trans|striptags }}">
											{% block layout_header_navigation_toggle_button_icon %}
												{% sw_icon 'stack' %}
											{% endblock %}
										</button>
									{% endblock %}
								</div>
							</div>
						{% endblock %}

						<div class="logo-sm">
							{% sw_include '@Storefront/storefront/layout/header/logo.html.twig' %}
						</div>


						{% block layout_header_search_toggle %}
							<div class="col-auto d-sm-none">
								<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 }}">
										{% sw_icon 'search' %}
									</button>
								</div>
							</div>
						{% endblock %}

						{% if config('core.cart.wishlistEnabled') %}
							{% block layout_header_actions_wishlist %}
								<div class="col-auto">
									<div class="header-wishlist">
										<a class="btn header-wishlist-btn header-actions-btn" href="{{ path('frontend.wishlist.page') }}" title="{{ 'header.wishlist'|trans|striptags }}" aria-labelledby="wishlist-basket-live-area">
											{% sw_include '@Storefront/storefront/layout/header/actions/wishlist-widget.html.twig' %}
										</a>
									</div>
								</div>
							{% endblock %}
						{% endif %}

						{% block layout_header_actions_account %}
							<div class="col-auto">
								<div class="account-menu">
									{% sw_include '@Storefront/storefront/layout/header/actions/account-widget.html.twig' %}
								</div>
							</div>
						{% endblock %}

						{% block layout_header_actions_cart %}
							<div class="col-auto">
								<div class="header-cart" data-off-canvas-cart="true">
									<a class="btn header-cart-btn header-actions-btn" href="{{ path('frontend.checkout.cart.page') }}" data-cart-widget="true" title="{{ 'checkout.cartTitle'|trans|striptags }}" aria-labelledby="cart-widget-aria-label" aria-haspopup="true">
										{% sw_include '@Storefront/storefront/layout/header/actions/cart-widget.html.twig' %}
									</a>
								</div>
							</div>
						{% endblock %}
					</div>
				</div>
			{% endblock %}

		</div>
	{% endblock %}
{% endblock %}