{% set title = title ?? globalFAQ.globalFAQ|default %}
{% set id = (title ?? block.accordionTitle|default("accordion-" ~ random(9999)))|kebab %}
{% set body = body ?? block.accordionBody|default %}
{% set bodyClasses = bodyClasses ?? "richtext" %}

{% import 'macros' as macros %}

<div class="relative w-full accordion" x-data="{ expanded: false }">
	<button type="button" class="w-full transition border-t-2 focus:outline-none group hover:border-green-500 focus:border-green-500" :class="expanded == 1 ? 'border-green-500' : 'border-blue-500'" id="{{ id }}-trigger" aria-controls="{{ id }}-content" :aria-expanded="expanded ? 'true' : 'false'" @click="expanded = !expanded">
		<div class="relative flex items-center justify-between w-full pt-3 transition border-t-4 border-transparent group-hover:border-blue-500 group-focus:border-green-500">
			<div class="pr-12 text-gray-700 heading-4" id="{{ id }}-header">
				{{ title|raw }}
			</div>

			<span class="p-2 transition border border-current rounded-full leading-0 type-xl text-blue group-hocus:bg-blue-500 group-hocus:text-white">
				{{ macros.icon(
					"outline/plus",
					"",
					{ ":class": "{ 'hidden' : expanded }" }
				) }}
				{{ macros.icon(
					"outline/minus",
					"",
					{ ":class": "{ 'hidden' : !expanded }" }
				) }}
			</span>
		</div>
	</button>

	<div role="region" id="{{ id }}-content" aria-labelledby="{{ id }}-trigger" class="relative overflow-hidden transition-all max-h-0" :aria-hidden="!expanded ? 'true' : 'false'"  :style="expanded == 1 ? 'max-height: ' + $el.scrollHeight + 'px' : ''">
		<div class="pt-4 {{ bodyClasses }}">
			{{ body|raw }}
		</div>
	</div>
</div>