segment-headline

// src/components/patterns/segment-headline/segment-headline.twig

{{ attach_library("circle_dot/pattern-segment-headline") }}

{# Set default size #}
{% set size = size|default('l') %}

{# Build class list #}
{% set classes = [
	'SegmentHeadline',
	'SegmentHeadline--' ~ size
] %}

<header class="{{ classes|join(' ')|trim }}">
	<div class="SegmentHeadline-headerTop">
		<div class="SegmentHeadline-headlineWrapper">
			<h2 class="SegmentHeadline-headline">{{ title }}</h2>
			{% if show_link %}
				<a href="{{ link_url|default('#') }}" class="SegmentHeadline-link" aria-label="View more">
					<svg class="SegmentHeadline-linkIcon" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
				</a>
			{% endif %}
		</div>

		{% if show_sorting %}
			{# Transform sorting_options to match select component format #}
			{% set transformed_options = [] %}
			{% for option in sorting_options|default([]) %}
				{% set transformed_options = transformed_options|merge([{
					type: 'option',
					label: option.label,
					value: option.value,
					selected: option.label == sorting_default
				}]) %}
			{% endfor %}

			{# Use default options if none provided #}
			{% if transformed_options is empty %}
				{% set transformed_options = [
					{type: 'option', label: 'Aktualität', value: 'date', selected: true},
					{type: 'option', label: 'Relevanz', value: 'relevance'},
					{type: 'option', label: 'Meistgelesen', value: 'popular'}
				] %}
			{% endif %}

			<form class="SegmentHeadline-sortingForm" action="{{ sorting_action|default('') }}" method="get">
				{% if sorting_hidden_params %}
					{% for param in sorting_hidden_params %}
						<input type="hidden" name="{{ param.name }}" value="{{ param.value }}">
					{% endfor %}
				{% endif %}

				<label class="SegmentHeadline-sortingLabel" for="sorting-select">Sortieren nach:</label>
				{% include "@elements/select/select.twig" with {
					id: "sorting-select",
					name: "sort",
					options: transformed_options,
					classes: ["SegmentHeadline-sortingSelect"]
				} only %}
			</form>
		{% endif %}
	</div>
	<div class="SegmentHeadline-divider"></div>
</header>