{% set DEFAULT_TAB_LIST_SETTINGS = {
  pluginOptions: {},
  className: '',
  iconPosition: 'left',
  iconOnly: false,
  tabs: [
    {
      title: 'Tab item 1'
    },
    {
      title: 'Tab item 2',
      active: true
    },
    {
      title: 'Tab item 3'
    },
    {
      title: 'Tab item 4'
    }
  ]
} %}

{% macro Tabs(settings = {}) %}
  {% set settings = merge(DEFAULT_TAB_LIST_SETTINGS, settings) %}
  {% set tabItemDirection = 'tabs__item--column' if settings.iconPosition == 'top' else '' %}

  <div class="tabs {{ settings.className }}" x-tabs>
    <div class="tabs__triggers" x-tabs:tablist>
      {% for tab in settings.tabs %}
        {% set tabClassList = [
          'tabs__item--disabled' if tab.disabled,
          tab.className
        ] %}

        <button type="button" class="tabs__item {{ tabItemDirection }} {{ setClass(tabClassList) }}"
          {{ 'x-tabs:control.active' if tab.active else 'x-tabs:control' }}
          {{ Helpers.setAttr('disabled', tab.disabled) }}
        >
          <span class="tabs__text">{{ tab.title }}</span>
        </button>
      {% endfor %}
    </div>
    {{ caller() }}
  </div>
{% endmacro %}

{% set TAB_PANEL_DEFAULTS = {
  className: '',
  index: 0,
  id: ''
} %}

{% macro TabPanel(settings = {}) %}
  {% set settings = merge(TAB_PANEL_DEFAULTS, settings) %}

  <div class="tabs__panel" x-tabs:panel x-transition>
    {{ caller() }}
  </div>
{% endmacro %}