{% set DEFAULT_ACCORDION_SETTINGS = {
  className: '',
  title: 'Accrodion title',
  titleTag: 'h3',
  icon: 'icons/arrow-bottom',
  active: false,
  disabled: false,
  classNameContent: '',
  attrs: {},
  useIcon: true
} %}

{% macro Accordion(settings = {}) %}
  {% set settings = merge(DEFAULT_ACCORDION_SETTINGS, settings) %}
  {% set classNames = [settings.className] %}
  {% set directive = 'x-accordion' %}

  {% if settings.active %}
    {% set directive = directive + '.active' %}
  {% endif %}

  {% if settings.disabled %}
    {% set directive = directive + '.disabled' %}
  {% endif %}

  <div
    class="accordion {{ setClass(classNames) }}"
    {{ Helpers.setAttributes(settings.attrs) }}
    {{ directive }}
  >
    <{{ settings.titleTag }} class="accordion__trigger">
      <button
        class="accordion__trigger-button"
        type="button"
        {{ Helpers.setAttr('disabled', settings.disabled) }}
      >
        {{ Helpers.setAttributes(settings.attrsButton) }}
        <span class="accordion__trigger-title">{{ settings.title }}</span>
        {% if settings.useIcon %}
          <span class="accordion__trigger-icon" aria-hidden="true">
          {{ Helpers.svg(settings.icon) }}
        </span>
        {% endif %}
      </button>
    </{{ settings.titleTag }}>
    <div class="accordion__wrapper-content" {{ Helpers.setAttr('x-cloak', not settings.active) }}>
      <div class="accordion__content {{ settings.classNameContent }}">
        {{ caller() }}
      </div>
    </div>
  </div>
{% endmacro %}

{% set DEFAULT_ACCORDION_GROUP_SETTINGS = {
  single: false,
  showAlways: false
} %}

{% macro AccordionGroup(settings = {}) %}
  {% set settings = merge(DEFAULT_ACCORDION_GROUP_SETTINGS, settings) %}
  {% set directive = 'x-accordion:group.single' if settings.single else 'x-accordion:group' %}

  {% if settings.showAlways %}
    {% set directive = directive + '.showAlways' %}
  {% endif %}

  <div class="accordion-group {{ settings.className }}" {{ directive }}>
    {{ caller() }}
  </div>
{% endmacro %}