job-market-search

// src/components/patterns/job-market-search/job-market-search.twig

{{ attach_library("circle_dot/pattern-job-market-search") }}

{% set job_position_label %}
	{% include "@elements/form-elements/label/label.twig" with {
			label: "Welche Stelle suchen Sie?",
			htmlFor: "job-position",
			visually_hidden: true
		} only %}
{% endset %}

{% set job_position_form_element %}
	{% include "@elements/form-elements/input/input.twig" with {
			additional_attributes: [
				["placeholder", "Welche Stelle suchen Sie?"]
			],
			type: "text",
			name: "search",
			id: "job-position",
		} only %}
{% endset %}

{% set job_location_label %}
	{% include "@elements/form-elements/label/label.twig" with {
			label: "Ort, Bundesland",
			htmlFor: "job-location",
			visually_hidden: true
		} only %}
{% endset %}

{% set job_location_form_element %}
	{% include "@elements/form-elements/input/input.twig" with {
			additional_attributes: [
				["placeholder", "Ort, Bundesland"]
			],
			type: "text",
			name: "location",
			id: "job-location",
		} only %}
{% endset %}

<beck-job-market-search class="JobMarketSearch {% if should_breakout|default(true) %}u-breakout{% endif %}" data-theme="{{ theme }}" api-endpoint="{{ api_endpoint }}">
	<search class="JobMarketSearch-header">
		<div class="JobMarketSearch-logo">
			{{ logo }}
		</div>
		<form action="{{ action_url }}" class="JobMarketSearch-form js-JobMarketSearch-form" name="beck-job-market-search" method="get">
			<fieldset>
				<legend class="visually-hidden">Beck Stellenmarkt</legend>
				{% include "@elements/form-element-container/form-element-container.twig" with {
					label: job_position_label,
					form_element: job_position_form_element
				} only %}

				{% include "@elements/form-element-container/form-element-container.twig" with {
					label: job_location_label,
					form_element: job_location_form_element
				} only %}

				{% include "@elements/button/button.twig" with {
					icon: "search",
					label: "Job finden",
					modifiers: ["primary"],
					type: "submit",
				} only %}
			</fieldset>
		</form>
	</search>

	<section aria-labelledby="search-results-title" aria-live="polite" class="JobMarketSearch-results">
		<span class="visually-hidden" id="search-results-title">Beck Stellenmarkt Results</span>

		<cd-swiper data-config='{"slidesPerView": "auto", "spaceBetween": 16, "slidesOffsetAfter": 0, "breakpoints": {"768": {"slidesPerView": 4, "spaceBetween": 32, "slidesOffsetAfter": 0}}}'>
			<div class="Swiper-container JobMarketSearch-resultsList js-JobMarketSearch-resultsList">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						{% include "@patterns/job-market-search/result-card/result-card.twig" with {
							is_all_jobs_card: true,
							template_id: "all-jobs-card-template",
							theme: "dark",
							title: "Nichts Passendes gefunden?",
							description: "Keine Sorge. Es gibt noch viele weitere Stellenangebote zu entdecken!",
							link_label: "Alle Jobs entdecken",
							url: all_jobs_url,
							target: "_blank"
						} only %}
					</div>
					{# Static preview cards for Miyagi - these will be replaced by API results in production #}
					{% for i in 1..6 %}
					<div class="swiper-slide">
						{% include "@patterns/job-market-search/result-card/result-card.twig" with {
							theme: "white",
							show_badge: i == 1,
							title: "Geschäftsbereichsleiter Recht und Steuern / Unternehmensgründung und -förderung (m/w/d)",
							description: "Senatsverwaltung für Stadtentwicklung, Bauen und Wohnen",
							location: "Köln",
							url: "/job-" ~ i,
							logo: {
								uri: "https://via.placeholder.com/80x80?text=Logo",
								alt: "Company Logo",
								width: "80",
								height: "80"
							}
						} only %}
					</div>
					{% endfor %}
				</div>
			</div>
		</cd-swiper>

		<div class="JobMarketSearch-error js-JobMarketSearch-error" hidden>
			<h3 class="JobMarketSearch-errorTitle">Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.</h3>
		</div>

		<div class="JobMarketSearch-emptyResults js-JobMarketSearch-emptyResults" hidden>
			<h3 class="JobMarketSearch-emptyResultsTitle">Die Suche liefert keine Ergebnisse.</h3>
			<p class="JobMarketSearch-emptyResultsMessage">Bitte passen Sie die Parameter an und versuchen es erneut. Alternativ können Sie auch</p>
			{% include "@elements/button/button.twig" with {
				label: "Alle Jobs entdecken",
				icon: "arrow-right",
				icon_position: "right",
				modifiers: ["secondary"],
				url: all_jobs_url,
				target: "_blank"
			} only %}
		</div>
	</section>

	<div class="JobMarketSearch-pager">
		{% include "@patterns/pager/pager.twig" with {
			variant: "dots",
			current_page: 1,
			total_pages: 2,
			start_page_in_0: false,
		} only %}
	</div>

	{% include "@patterns/job-market-search/result-card/result-card.twig" with {
		as_template_element: true,
		template_id: "result-card-template",
		theme: "white",
	} only %}
</beck-job-market-search>