{{ header }}
{{ content_top }}
<main class="search-page">
	<section class="search-page__hero">
		<div class="container-fluid">
			<ul class="search-page__breadcrumb">
				{% for breadcrumb in breadcrumbs %}
				<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if not loop.last %}<span>/</span>{% endif %}</li>
				{% endfor %}
			</ul>
			<div class="search-page__intro">
				<span class="search-page__eyebrow">{{ text_search_eyebrow }}</span>
				<h1>{{ heading_title }}</h1>
				<p>{{ text_search_hint }}</p>
			</div>
			<form class="search-page__form" data-search-url="{{ search_url }}" onsubmit="return submitProductSearch(this);">
				<label class="visually-hidden" for="search-page-input">{{ entry_search }}</label>
				<input id="search-page-input" type="search" name="search" value="{{ search }}" placeholder="{{ text_keyword }}" autocomplete="off">
				<button type="submit" aria-label="{{ button_search }}">
					<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
						<circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.5"/>
						<path d="M16 16L21 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
					</svg>
					<span>{{ button_search }}</span>
				</button>
			</form>
		</div>
	</section>

	<section class="search-page__results">
		<div class="container-fluid">
			{% if search %}
				<div class="search-page__summary">
					<div>
						<span class="search-page__eyebrow">{{ text_search_results }}</span>
						<h2>{{ text_search_for|format(search) }}</h2>
					</div>
					<div class="search-page__count">{{ text_found|format(product_total) }}</div>
				</div>

				{% if products %}
				<div class="row g-3 product-items">
					{% for product in products %}
					<div class="col-6 col-lg-4">
						{% include 'dominik/template/common/product.twig' %}
					</div>
					{% endfor %}
				</div>
				<div class="search-page__pagination">
					<div class="pagination">{{ pagination }}</div>
					<div>{{ results }}</div>
				</div>
				{% else %}
				<div class="search-page__empty">
					<h2>{{ text_empty }}</h2>
					<p>{{ text_empty_hint }}</p>
				</div>
				{% endif %}
			{% else %}
			<div class="search-page__empty">
				<h2>{{ text_start_search }}</h2>
				<p>{{ text_search_note }}</p>
			</div>
			{% endif %}
		</div>
	</section>
</main>
{{ content_bottom }}
{{ footer }}
