{{ header }}
{{ content_top }}
<section class="section-wishlist fitting-room py-5">
	<div class="container-fluid"  id="section-wishlist">
		<ul class="breadcrumb">
		{% for key,breadcrumb in breadcrumbs %}
			<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span class="mx-2">•</span>{% endif %}</li>
		{% endfor %}
		</ul>

		<div class="fitting-room__hero">
			<div>
				<div class="fitting-room__eyebrow">{{ text_eyebrow }}</div>
				<h1>{{ heading_title }}</h1>
				<p>{{ text_intro }}</p>
			</div>
			{% if products %}
			<div class="fitting-room__summary">
				<div class="fitting-room__count">{{ fitting_room_count }}</div>
				<div>{{ text_selected }}</div>
				<button type="button" class="btn btn-dark w-100 mt-3" onclick="SendRequest(0, 'fitting_room')">{{ button_request }}</button>
				<div class="fitting-room__note">{{ text_request_note }}</div>
			</div>
			{% endif %}
		</div>

		{% if products %}
		<div class="fitting-room__toolbar">
			<div>{{ text_hint }}</div>
			<a href="{{ clear }}" class="fitting-room__clear" onclick="return confirm('{{ text_clear_confirm|e('js') }}');">{{ button_clear }}</a>
		</div>
		<div class="row g-3 product-items">
			{% for product in products %}
			<div class="col-6 col-lg-4">
				<div class="fitting-room__item">
					{% include 'dominik/template/common/product.twig' %}
					<a href="{{ product.remove }}" class="fitting-room__remove" aria-label="{{ button_remove }}: {{ product.name }}">{{ button_remove }}</a>
				</div>
			</div>
			{% endfor %}
		</div>
		{% else %}
		<div class="fitting-room__empty">
			<div class="fitting-room__empty-icon">♡</div>
			<h2>{{ text_empty }}</h2>
			<p>{{ text_empty_description }}</p>
			<a href="{{ continue }}" class="btn btn-dark mt-3">{{ button_continue }}</a>
		</div>
		{% endif %}
	</div>
</section>


{{ content_bottom }}

{{ footer }}
