{% sw_extends '@Storefront/storefront/component/product/listing.html.twig' %}

{% block element_product_listing_pagination_nav_top %}
	{{ parent() }}
{% endblock %}

{% block element_product_listing_sorting %}
	{% if activeRoute !== 'frontend.wishlist.page' and activeRoute !== 'frontend.search.page' and activeRoute !== 'widgets.search.pagelet.v2' %}
		{% set boxLayoutBc = app.session.get('boxLayoutBc') ?: boxLayout %}
		{% if boxLayoutBc == 'list'  %}
			{% set boxLayoutBc = 'standard' %}
		{% endif %}
		<div class="sort--box">
			<form id="listing-style-form">
				<div class="listing-layout--wrapper">
					<div>
						{% set minimalIcon  = asset('/storefront/assets/images/icons/listing/standard2.png','@BrandCrockAquaTheme')  %}
						{% set standardIcon = asset('/storefront/assets/images/icons/listing/standard1.png','@BrandCrockAquaTheme')  %}
						{% set listIcon     = asset('/storefront/assets/images/icons/listing/list.png','@BrandCrockAquaTheme')  %}
						<label class="labelStandard {{ (boxLayout == boxLayoutBc) ? 'active' : '' }}">
							<input type="radio" {{ (boxLayout == boxLayoutBc) ? 'checked' : '' }} name="boxLayout" value="{{boxLayoutBc}}"/>
							<img src="{{ standardIcon }}" alt="{{boxLayoutBc}}" title="{{boxLayoutBc}}" height="20" width="20">
						</label>
						<label class="labellist {{ (boxLayout == 'list') ? 'active' : '' }}">
							<input class="btn btn-primary-sm" type="radio" {{ (boxLayout == 'list') ? 'checked' : '' }} name="boxLayout" value="list"/>
							<img src="{{ listIcon }}" alt="list" title="List" height="20" width="20">
						</label>
					</div>
				</div>
			</form>
			{{ parent() }}
		</div>
	{% endif %}
{% endblock %}
