job-market-teaser

// src/components/patterns/teasers/job-market-teaser/job-market-teaser.twig

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

{# Set default values for optional properties #}
{% set week_badge = week_badge|default(false) %}
{% set image = image|default(null) %}
{% set company_name = company_name|default(null) %}
{% set location = location|default(null) %}
{% set url = url|default(null) %}
{% set external_link_url = external_link_url|default(null) %}

{# Build class list #}
{% set classes = [
	'JobMarketTeaser',
	'JobMarketTeaser--list',
	week_badge ? 'JobMarketTeaser--withBadge' : null,
	not image ? 'JobMarketTeaser--noImage' : null
] %}

<article class="{{ classes|join(' ')|trim }}" data-theme="{{ theme }}">
	{# Teaser link (stretched to cover entire teaser) #}
	{% if url %}
		<a href="{{ url }}" class="JobMarketTeaser-link" target="_blank" rel="noopener noreferrer">
			<span class="u-hiddenVisually">{{ heading }}</span>
		</a>
	{% endif %}

	<div class="JobMarketTeaser-topRow">
		{# Company logo/image - always rendered with placeholder if no image #}
		<div class="JobMarketTeaser-imageWrapper{% if not image %} JobMarketTeaser-imageWrapper--placeholder{% endif %}">
			{% if image %}
				{{ image }}
			{% else %}
				<div class="JobMarketTeaser-placeholder">
					{% include "@elements/icon/icon.twig" with {
						name: 'beck_stellenmarkt',
						label: 'Beck Stellenmarkt'
					} only %}
				</div>
			{% endif %}
		</div>

		{# Badge container (positioned top-right) #}
		{% if week_badge %}
			{% include "@elements/badge/badge.twig" with {
				type: 'week',
				label: 'Stelle der woche'
			} only %}
		{% endif %}
	</div>

	<div class="JobMarketTeaser-content">
		{# Job title (required, with ellipsis truncation) #}
		<h3 class="JobMarketTeaser-heading">{{ heading }}</h3>

		{# Company name - conditionally rendered #}
		{% if company_name %}
			<p class="JobMarketTeaser-company">{{ company_name }}</p>
		{% endif %}

		{# Location row with pin icon and optional external link - conditionally rendered #}
		{% if location or external_link_icon %}
			<div class="JobMarketTeaser-location">
				{% if location %}
					<div class="JobMarketTeaser-locationWrapper">
						{{ location_icon }}
						<span class="JobMarketTeaser-locationText">{{ location }}</span>
					</div>
				{% endif %}

				{% if external_link_icon and external_link_url %}
					<a href="{{ external_link_url }}" class="JobMarketTeaser-externalLink" target="_blank" rel="noopener noreferrer">
						{{ external_link_icon }}
					</a>
				{% endif %}
			</div>
		{% endif %}
	</div>
</article>