citation

// src/components/patterns/citation/citation.twig

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

{% set additional_attributes_string %}
{% for attribute in additional_attributes %}
	{{ attribute[0] }}="{{ attribute[1] }}"
{% endfor %}
{% endset %}

{% set copy_button %}
{# TODO: Translate #}
{% include "@elements/button/button.twig" with {
		additional_attributes: [["aria-live", "polite"], ["data-copied", "Kopiert"]],
		classes: ["Citation-actionButton", "js-Citation-copyButton"],
		icon: "copy",
		label: "Vorschlag kopieren",
		modifiers: ["primary"],
	} only %}
{% endset %}

{% set info_button %}
{# TODO: Translate #}
{% include "@elements/button/button.twig" with {
		classes: ["Citation-actionButton"],
		label: "Infos zum Vorschlag",
		url: info_url,
		icon: "arrow-right",
		icon_position: "right",
		modifiers: ["quaternary"],
	} only %}
{% endset %}

<beck-copy-citation
	class="Citation {{ classes|join(' ') }}" {{ additional_attributes_string }}>

	{# TODO: Translate #}
	{% include "@elements/button/button.twig" with {
		classes: ["js-Citation-toggle"],
		label: "Zitieren",
		icon: "link",
		modifiers: ["quaternary"],
	} only %}

	{# TODO: Translate #}
	{% include "@patterns/card/card.twig" with {
		additional_attributes: [["tabindex", "-1"]],
		classes: ["Citation-card", "js-Citation-card"],
		content: citation_text,
		dismissible: true,
		is_hidden: true,
		title: "Zitiervorschlag",
		actions: [copy_button, info_button],
	} only %}
</beck-copy-citation>