hints

// src/components/patterns/hints/hints.twig

{{ attach_library("circle_dot/pattern-hints") }}

{% set hints_id = id|default(random()) %}
{% set variant = variant|default('dots') %}

<cd-hints
	class="Hints"
	id="{{ hints_id }}"
	data-total-pages="{{ hints|length }}"
>
	{# Hints Container #}
	<div class="Hints-container">
		<div class="Hints-track">
			{% for hint in hints %}
				<div class="Hints-slide" data-slide-index="{{ loop.index }}">
					{% include "@elements/hint/hint.twig" with hint only %}
				</div>
			{% endfor %}
		</div>
	</div>

	{# Pager Navigation #}
	{% if hints|length > 1 %}
		<div class="Hints-pager">
			{% include "@patterns/pager/pager.twig" with {
				variant: variant,
				current_page: 1,
				total_pages: hints|length,
				light: true,
			} only %}
		</div>
	{% endif %}
</cd-hints>