search

// src/components/patterns/search/search.twig

{{ attach_library('circle_dot/pattern-search') }}

<div class="Search u-container">
	{# Search Input Section #}
	<div class="Search-searchSection">
		<form class="Search-searchForm" action="{{ active_tab == 'articles' ? search_action : search_action_jobs }}" method="get">
			<div class="Search-searchField">
				<label for="search-input" class="Search-searchLabel">Suchbegriff</label>
				<div class="Search-inputWrapper">
					{% include "@elements/input/input.twig" with {
						id: "search-input",
						name: "keys",
						value: search_value,
						placeholder: search_placeholder,
						classes: ["Search-input"],
						attributes: autocomplete_url ? ' data-autocomplete-url=' ~ autocomplete_url ~ '' : ''
					} only %}
					<button type="button" class="Search-clearButton" aria-label="Suchbegriff löschen">
						<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
							<path fill="currentColor" d="M17.218 17.82a1.2 1.2 0 0 1-1.697 0L12 14.297l-3.516 3.516a1.2 1.2 0 1 1-1.697-1.697L10.303 12 6.787 8.484a1.2 1.2 0 0 1 1.697-1.697L12 10.303l3.516-3.516a1.2 1.2 0 0 1 1.697 1.697L13.697 12l3.516 3.516a1.2 1.2 0 0 1 0 1.697z"/>
						</svg>
					</button>
					<button type="submit" class="Search-submitButton">
						<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true">
							<circle cx="11" cy="11" r="6" fill="none" stroke="currentColor" stroke-width="2"/>
							<path d="M15.5 15.5L19 19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
						</svg>
						<span class="Search-submitText">Suchen</span>
					</button>
				</div>
			</div>
		</form>
	</div>

	{# Results and Filters Section #}
	<div class="Search-resultsSection">
		{# Results Tabs #}
		<div class="Search-tabs">
			<a href="{{ search_action }}" class="Search-tab {% if active_tab == 'articles' %}Search-tab--active{% endif %}">
				<span class="Search-tabCount">{{ articles_count }} Artikel{% if articles_filtered %} (gefiltert){% endif %}</span>
			</a>
			<a href="{{ search_action_jobs }}" class="Search-tab {% if active_tab == 'jobs' %}Search-tab--active{% endif %}">
				<span class="Search-tabCount">{{ jobs_count }} Stellenanzeigen</span>
			</a>
		</div>

		{# Filter Section #}
		<div class="Search-filterSection">
			{% if active_tab == 'articles' %}
				{# Article Filters #}
				<form class="Search-filterForm" action="{{ search_action }}" method="get">
					<input type="hidden" name="keys" value="{{ search_value }}">
					<input type="hidden" name="tab" value="articles">

					<div class="Search-filterGroup">
						<label class="Search-filterLabel">Filter</label>
						<div class="Search-filterFields">
							<div class="Search-filterField">
								{% include "@elements/select/select.twig" with {
									id: "filter-format",
									name: "field_editorial_format",
									options: filters_articles.format_options
								} only %}
							</div>
							<div class="Search-filterField">
								{% include "@elements/select/select.twig" with {
									id: "filter-law-area",
									name: "field_legal_areas",
									options: filters_articles.law_area_options,
									attributes: 'data-multivalue="plus"'
								} only %}
							</div>
							<div class="Search-filterField">
								{% include "@elements/select/select.twig" with {
									id: "filter-timeframe",
									name: "published_at",
									options: filters_articles.timeframe_options
								} only %}
							</div>
						</div>
					</div>

					{% if active_filters|length > 0 %}
						<div class="Search-activeFilters">
							<div class="Search-filterTags">
								{% for filter in active_filters %}
									<a href="{{ filter.url }}" class="Search-filterTag">
										<span>{{ filter.label }}</span>
										<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
											<path fill="currentColor" d="M11.478 11.879a.8.8 0 0 1-1.131 0L8 9.531l-2.344 2.344a.8.8 0 1 1-1.131-1.131L6.869 8.4 4.525 6.056a.8.8 0 0 1 1.131-1.131L8 7.269l2.344-2.344a.8.8 0 0 1 1.131 1.131L9.131 8.4l2.344 2.344a.8.8 0 0 1 0 1.131z"/>
										</svg>
									</a>
								{% endfor %}
							</div>
							{% if show_clear_filters %}
								<a href="{{ clear_filters_url }}" class="Search-clearFiltersButton">
									Alle Filter löschen
								</a>
							{% endif %}
						</div>
					{% endif %}
				</form>

			{% elseif active_tab == 'jobs' %}
				{# Job Filters #}
				<form class="Search-filterForm" action="{{ search_action_jobs }}" method="get">
					<input type="hidden" name="keys" value="{{ search_value }}">
					<input type="hidden" name="tab" value="jobs">

					<div class="Search-filterGroup">
						<label class="Search-filterLabel">Filter</label>
						<div class="Search-filterFields">
							<div class="Search-filterField">
								{% include "@elements/select/select.twig" with {
									id: "filter-job-law-area",
									name: "law_area",
									options: filters_jobs.law_area_options
								} only %}
							</div>
							<div class="Search-filterField">
								{% include "@elements/input/input.twig" with {
									id: "filter-location",
									name: "location",
									value: filters_jobs.location_value,
									placeholder: filters_jobs.location_placeholder
								} only %}
							</div>
							<div class="Search-filterField">
								{% include "@elements/select/select.twig" with {
									id: "filter-radius",
									name: "radius",
									options: filters_jobs.radius_options
								} only %}
							</div>
						</div>
					</div>

					{% if empty_state %}
						<div class="Search-emptyState">
							<p class="Search-emptyStateHeading">{{ empty_state.heading }}</p>
							<p class="Search-emptyStateMessage">{{ empty_state.message }}</p>
						</div>
					{% endif %}
				</form>
			{% endif %}
		</div>
	</div>
</div>