hint

// src/components/elements/hint/hint.twig

{% set hint_id = id|default(random()) %}

<cd-hint id="{{ hint_id }}" class="Hint{% if is_expanded|default(false) %} is-expanded{% endif %}">
	<div class="Hint-container">
		<button
			class="Hint-header"
			aria-expanded="{{ is_expanded|default(false) ? 'true' : 'false' }}"
			aria-controls="{{ hint_id }}-content"
			aria-labelledby="{{ hint_id }}-title"
		>
			<div class="Hint-headerContent">
				<span class="Hint-icon" aria-hidden="true">
					{{ icon|raw }}
				</span>
				<div class="Hint-titleGroup">
					<span class="Hint-label">{{ label|default("HINWEIS") }}</span>
					<h3 class="Hint-title" id="{{ hint_id }}-title">{{ title }}</h3>
				</div>
			</div>
			<span class="Hint-caret" aria-hidden="true">
				{% include "@elements/icon/icon.twig" with {
					name: "caret-up",
					classes: ["Hint-caretIcon"]
				} only %}
			</span>
		</button>

		{% if content or form_fields %}
			<div
				class="Hint-content"
				id="{{ hint_id }}-content"
				role="region"
				aria-labelledby="{{ hint_id }}-title"
			>
				<div class="Hint-contentInner">
				{% if form_fields %}
					<div class="Hint-form">
						{% for field in form_fields %}
							{% if field.type == "row" %}
								<div class="Hint-formRow">
									{% for subfield in field.fields %}
										<div class="Hint-formField">
											<label for="{{ subfield.id }}" class="u-hiddenVisually">
												{{ subfield.label|default(subfield.placeholder) }}
											</label>
											{% include "@elements/input/input.twig" with {
												id: subfield.id,
												name: subfield.name,
												placeholder: subfield.placeholder,
												type: subfield.input_type|default('text'),
												required: subfield.required|default(false),
												classes: ['Hint-formInput']
											} only %}
										</div>
									{% endfor %}
								</div>
							{% else %}
								<div class="Hint-formField Hint-formField--full">
									<label for="{{ field.id }}" class="u-hiddenVisually">
										{{ field.label|default(field.placeholder) }}
									</label>
									{% include "@elements/input/input.twig" with {
										id: field.id,
										name: field.name,
										placeholder: field.placeholder,
										type: field.input_type|default('text'),
										required: field.required|default(false),
										classes: ['Hint-formInput']
									} only %}
								</div>
							{% endif %}
						{% endfor %}

						{% if form_disclaimer %}
							<div class="Hint-disclaimer">
								{{ form_disclaimer|raw }}
							</div>
						{% endif %}

						{% if form_button %}
							<div class="Hint-formButton">
								{% include "@elements/button/button.twig" with form_button only %}
							</div>
						{% endif %}
					</div>
				{% else %}
					<div class="Hint-text">
						{{ content|raw }}
					</div>
					{% if has_scrollbar %}
						<div class="Hint-scrollbar" aria-hidden="true"></div>
					{% endif %}
				{% endif %}
				</div>
			</div>
		{% endif %}
	</div>
</cd-hint>