{% set header_class = (header_type == '4' or header_type == '5' or header_type == '6' or header_type == '8') ? 1 : 0 %}
{% for key,link in main_navs[number].type[0].links %} 
	{% set cat_id = key|slice(1) %} 
	{% set element = main_navs[number].addelem %}
	{% if (not categories.categoriesls[cat_id].childrencount) %}
	<li>
		<a class="{% if header_class %}header__nav-link{% else %}header__tags-btn{% endif %}" href="{{ categories.categoriesls[cat_id].href }}">
			{% if not header_class %} 
				{% if (nav_icons[key].image.h[naw_row_id]) %}
				{{nav_icons[key].image.h[naw_row_id]}}
				{% endif %}
			{% endif %}
			{{ categories.categoriesls[cat_id].name }}
		</a>
	</li>
	{% else %}
	<li>
		<a class="{% if header_class %}header__nav-link{% else %}header__tags-btn{% endif %}" href="{{ categories.categoriesls[cat_id].href }}">
			{% if header_class %}
			{{ categories.categoriesls[cat_id].name }}<svg class="icon-arrow-down"><use xlink:href="catalog/view/theme/prostore/sprites/sprite.svg#icon-arrow-down"></use></svg>
			{% else %}
				{% if (nav_icons[key].image.h[naw_row_id]) %}
				{{nav_icons[key].image.h[naw_row_id]}}
				{% endif %}
			{{ categories.categoriesls[cat_id].name }}
			{% endif %}
		</a>
		<div class="{% if header_class %}header__nav{% else %}header__tags{% endif %}-offcanvas {% if header_class %}header__nav{% else %}header__tags{% endif %}-offcanvas--fullwidth {% if element.content is not empty %}{% if header_class %}header__nav{% else %}header__tags{% endif %}-offcanvas--w1142{% endif %}">
			<div class="row">
				<div class="{% if element.content is not empty %}col-8{% else %}col-12{% endif %}">
					{% if main_navs[number].type[0].cattoview.main_toplinks is not empty %}
					<ul class="header__catalog-quick">
						{% for toplink in main_navs[number].type[0].cattoview.main_toplinks %}
						<li>
							<a class="header__catalog-quick-link" href="{{toplink.link}}">{{toplink.name}}</a>
						</li>
						{% endfor %}
					</ul>
					{% endif %}
					<div class="row"> 
						{% for categories in main_navs[number].type[0].cattoview[cat_id].columns %}
						{% set width = main_navs[number].type[0].cattoview[cat_id].width %}
						<div class="col-4" style="-ms-flex: 0 0 {{ width }}%;flex: 0 0 {{ width }}%;max-width: {{ width }}%;">
							{% for category in categories %}
								<span class="header__catalog-title">
									<a class="header__catalog-link" href="{{ category.href }}">{{ category.name }}</a>
								</span>                
								{% if (category.children and max_subcat > 0) %}
									<ul class="header__catalog-menu">
										{% for category3 in category.children|slice(0, max_subcat) %}
											<li>
												<a class="header__catalog-link" href="{{ category3.href }}">{{ category3.name }}</a>
											</li>                            
										{% endfor %}
										{% if (category.children|length > max_subcat) %}
											<li>
												<a class="header__catalog-link header__catalog-link--more" href="{{ category.href }}">{{ text_prostore_show_all }}</a>
											</li>
										{% endif %}
									</ul>
								{% endif %}

							{% endfor %}
						</div>
						{% endfor %}
					</div>
					{% if element.content is not empty %}
						{% if element.content.main_banners is not empty %}
							<div class="header__spacer-40"> </div>
							{% for banner in element.content.main_banners %}
							<div class="row">
								{% for image in banner.images %}
								<div class="col-6">
									<a class="header__banner" href="{{image.link}}">
										<div class="header__banner-image">
											<img src="{{image.image}}" alt="{{image.title}}" loading="lazy">
										</div>
									</a>
								</div>
								{% endfor %}
							</div>
							{% endfor %}
						{% endif %}
					{% endif %}
				</div>
				{% if element.content is not empty %}
				<div class="col-4">
					<div class="header__additional">
						<strong class="header__additional-title">{{ main_navs[number].addelem.name[language_id] }}</strong>
						{% if element.settype == 0 %}
							{% if element.content.main_prods|length == 1 %}
							<div class="header__additional-single">
								{% for product in element.content.main_prods %}
								<div class="products__item">
									<div class="products__item-in">
										<div class="products__item-topleft">
											<div class="products__item-badges">
												{% if (product.isnewest) %}<span class="ui-badge ui-badge--blue">{{ element.content.labelsinfo.new.name[language_id] }}</span>{% endif %}
												{% if (product.special and product.sales) %}<span class="ui-badge ui-badge--red">{{ element.content.labelsinfo.sale.name[language_id] }}</span>{% endif %}
												{% if (product.popular) %}<span class="ui-badge ui-badge--orange">{{ product.popular }}</span>{% endif %}
												{% if (product.hit) %}<span class="ui-badge ui-badge--purple">{{ product.hit }}</span>{% endif %}
												{% if (product.nocatch) %}<span class="ui-badge">{{ product.catch }}</span>{% elseif product.catch %}<span class="ui-badge">{{ product.catch }}</span>{% endif %}
												{% if (product.reward) %}<span class="ui-badge ui-badge--transparent">{{ text_prostore_reward_short }} {{ product.reward }}</span>{% endif %}
											</div>
											{% if (product.rating != constant('false')) %}
											<span class="products__item-rating">{{ product.rating }} <svg class="icon-star"><use xlink:href="catalog/view/theme/prostore/sprites/sprite.svg#icon-star"></use></svg>
											</span>
											{% endif %}
										</div>
										<div class="products__item-buttons">
											<button type="button" class="ui-btn ui-btn--compare {% if product.wish_compare_data.compare_data.is_in_compare %}is-active{% endif %}" title="{{ button_compare }}" data-action="compare" data-for="{{ product.product_id }}">
												<svg class="icon-compare{% if product.wish_compare_data.compare_data.is_in_compare %}-active{% endif %}">
													<use xlink:href="catalog/view/theme/prostore/sprites/sprite.svg#icon-compare{% if product.wish_compare_data.compare_data.is_in_compare %}-active{% endif %}"></use>
												</svg>
											</button>
											<button type="button" class="ui-btn ui-btn--favorite {% if product.wish_compare_data.wish_data.is_in_wish %}is-active{% endif %}" title="{{ button_wishlist }}" data-action="wishlist" data-for="{{ product.product_id }}">
												<svg class="icon-favorites{% if product.wish_compare_data.wish_data.is_in_wish %}-active{% endif %}">
													<use xlink:href="catalog/view/theme/prostore/sprites/sprite.svg#icon-favorites{% if product.wish_compare_data.wish_data.is_in_wish %}-active{% endif %}"></use>
												</svg>
											</button>
										</div>
										{% if product.images %}
										<a class="products__item-gallery" href="{{ product.href }}">
											<div class="products__item-image is-active">
												<img src="{{ product.thumb }}" alt="{{ product.name }}" width="{{ product.image_product_width }}" height="{{ product.image_product_height }}" {% if lazyload %}loading="lazy"{% endif %}>
											</div>
											{% for imageX in product.images %}
											<div class="products__item-image">
												<img data-src="{{ imageX }}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{ product.name }}" width="{{ product.image_product_width }}" height="{{ product.image_product_height }}">
											</div>
											{% endfor %}
											<div class="products__item-pagination">
												<div class="products__item-bullet is-active"></div>
												{% for imageX in product.images %}
												<div class="products__item-bullet"></div>
												{% endfor %}
											</div>
										</a>
										{% else %}
										<a class="products__item-image" href="{{ product.href }}">
											<img src="{{ product.thumb }}" alt="{{ product.name }}" width="{{ product.image_product_width }}" height="{{ product.image_product_height }}" {% if lazyload %}loading="lazy"{% endif %}>
										</a>
										{% endif %}
										<span class="products__item-status {% if (product.quantity > 0) %}products__item-status--true{% else %}products__item-status--false{% endif %}">{{ product.stock }}</span>
										{% if product.manufacturer %}<span class="products__item-id">{{ product.manufacturer }}</span>{% endif %}
										<a class="products__item-title" href="{{ product.href }}">{{ product.name }}</a>
										{% if product.price %}
										<p class="products__item-price b">{% if product.special %}{% if product.sales and product.discount %}<mark>-{{ product.discount }}</mark>{% endif %}<ins>{{ product.special }} </ins><del>{{ product.price }}</del>{% else %}{{ product.price }}{% endif %}
										</p>
										{% endif %}
										<div class="products__item-action">
											<div class="ui-add-to-cart {% if product.isincart %}is-active{% endif %}">
												<button type="button" class="ui-btn ui-btn--primary" onclick="{% if product.isincart %}window.location.href='{{cart_link}}';{% else %}cart.add('{{ product.product_id }}', '{{ product.minimum }}');{% endif %}" {% if product.buy_btn %}disabled{% endif %} data-add-to-cart="{{ text_prostore_in_cart }}">{% if product.isincart %}{{ text_prostore_in_cart }}{% else %}{{ button_cart }}{% endif %}<svg class="icon-cart"><use xlink:href="catalog/view/theme/prostore/sprites/sprite.svg#icon-cart"></use>
													</svg>
												</button>
												<div class="ui-number">
													<button class="ui-number__decrease">
														<svg class="icon-decrease"><use xlink:href="catalog/view/theme/prostore/sprites/sprite.svg#icon-decrease"></use>
														</svg>
													</button>
													<button class="ui-number__increase">
														<svg class="icon-increase"><use xlink:href="catalog/view/theme/prostore/sprites/sprite.svg#icon-increase"></use>
														</svg>
													</button>
													<input class="ui-number__input" type="number" name="prod_id_quantity[{{ product.product_id }}]" value="{{ product.to_cart_quantity }}" min="0" max="9999">
												</div>
												<a class="ui-btn ui-btn--view js-btn-preview" title="{{ text_product_view_btn }}" data-for="{{ product.product_id }}" href="#popupprod">
													<svg class="icon-view"><use xlink:href="catalog/view/theme/prostore/sprites/sprite.svg#icon-view"></use>
													</svg>
												</a>
											</div>
										</div>
									</div>
								</div>
								{% endfor %}
							</div>
							{% else %}
							<ul class="header__additional-multiple">
								{% for product in element.content.main_prods %}
								<li>
									<div class="products__item products__item--small">
										<div class="products__item-in">
											<div class="products__item-buttons">
												<button type="button" class="ui-btn ui-btn--compare {% if product.wish_compare_data.compare_data.is_in_compare %}is-active{% endif %}" title="{{ button_compare }}" data-action="compare" data-for="{{ product.product_id }}">
													<svg class="icon-compare{% if product.wish_compare_data.compare_data.is_in_compare %}-active{% endif %}">
														<use xlink:href="catalog/view/theme/prostore/sprites/sprite.svg#icon-compare{% if product.wish_compare_data.compare_data.is_in_compare %}-active{% endif %}"></use>
													</svg>
												</button>
												<button type="button" class="ui-btn ui-btn--favorite {% if product.wish_compare_data.wish_data.is_in_wish %}is-active{% endif %}" title="{{ button_wishlist }}" data-action="wishlist" data-for="{{ product.product_id }}">
													<svg class="icon-favorites{% if product.wish_compare_data.wish_data.is_in_wish %}-active{% endif %}">
														<use xlink:href="catalog/view/theme/prostore/sprites/sprite.svg#icon-favorites{% if product.wish_compare_data.wish_data.is_in_wish %}-active{% endif %}"></use>
													</svg>
												</button>
											</div>
											{% if product.images %}
											<a class="products__item-gallery" href="{{ product.href }}">
												<div class="products__item-image is-active">
													<img src="{{ product.thumb }}" alt="{{ product.name }}" width="{{ product.image_product_width }}" height="{{ product.image_product_height }}" {% if lazyload %}loading="lazy"{% endif %}>
												</div>
												{% for imageX in product.images %}
												<div class="products__item-image">
													<img data-src="{{ imageX }}" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="{{ product.name }}" width="{{ product.image_product_width }}" height="{{ product.image_product_height }}">
												</div>
												{% endfor %}
												<div class="products__item-pagination">
													<div class="products__item-bullet is-active"></div>
													{% for imageX in product.images %}
													<div class="products__item-bullet"></div>
													{% endfor %}
												</div>
											</a>
											{% else %}
											<a class="products__item-image" href="{{ product.href }}">
												<img src="{{ product.thumb }}" alt="{{ product.name }}" width="{{ product.image_product_width }}" height="{{ product.image_product_height }}" {% if lazyload %}loading="lazy"{% endif %}>
											</a>
											{% endif %}
											{% if (product.rating != constant('false')) %}
											<span class="products__item-rating">{{ product.rating }} <svg class="icon-star"><use xlink:href="catalog/view/theme/prostore/sprites/sprite.svg#icon-star"></use>
												</svg>
											</span>
											{% endif %}
											<a class="products__item-title" href="{{ product.href }}">{{ product.name }}</a>
											{% if product.price %}
											<p class="products__item-price">{% if (product.special) %}<ins>{{ product.special }} </ins><del>{{ product.price }}</del>{% else %}{{ product.price }}{% endif %}
											</p>
											{% endif %}
										</div>
									</div>
								</li>
								{% endfor %}
							</ul>
							{% endif %}
						{% elseif element.settype == 2 %}
						<ul class="header__additional-brands">
							{% for manufacturer in element.content.main_manf %}
							<li>
								<a class="brands-featured__item" href="{{ manufacturer.href }}">
									<div class="brands-featured__item-image">
										<img src="{{ manufacturer.image }}" alt="{{ manufacturer.name }}" width="{{ image_manufacturer_width }}" height="{{ image_manufacturer_height }}"  loading="lazy">
									</div>
								</a>
							</li>
							{% endfor %}
						</ul>
						{% elseif element.settype == 1 %}
						{{ element.content.main_html }}
						{% endif %}
					</div>
				</div>
				{% endif %}
			</div>
		</div>
	</li>
	{% endif %}
{% endfor %}