{% set CAROUSEL_DEFAULT_SETTINGS = {
  className: '',
  classNameWrapper: '',
  classNameList: '',
  isThumbs: false,
  isMain: false,
  customArrows: false,
  customArrow: 'icons/arrow-right',
  hasPaginationWithArrows: false,
  arrowIcon: '',
  pluginOptions: {
    gap: '1rem',
    pagination: true,
    breakpoints: {
      '564': {
        perPage: 2
      },
      '768': {
        perPage: 3
      },
      '992': {
        perPage: 5
      }
    }
  }
} %}

{% macro Carousel(settings = {}) %}
  {% set settings = merge(CAROUSEL_DEFAULT_SETTINGS, settings) %}
  {% set directive = 'x-carousel' %}

  {% if settings.isThumbs %}
    {% set directive = directive + '.thumbs' %}
  {% elseif settings.isMain %}
    {% set directive = directive + '.main' %}
  {% endif %}

  <div
    class="splide {{ settings.className }}"
    {{ directive }}="{{ stringify(settings.pluginOptions) }}"
  >
    <div class="splide__track {{ settings.classNameWrapper }}">
      <ul class="splide__list {{ settings.classNameList }}">
        {{ caller() }}
      </ul>
    </div>
    {% if settings.hasPaginationWithArrows %}
      <div class="splide__arrows-pagination">
        <div class="splide__arrows-pagination-inner">
          <ul class="splide__pagination"></ul>
            <div class="splide__arrows">
            {% if settings.customArrows %}
              <button class="splide__arrow splide__arrow--prev">
                {{ Helpers.svg(settings.customArrow) }}
              </button>
              <button class="splide__arrow splide__arrow--next">
                {{ Helpers.svg(settings.customArrow) }}
              </button>
            {% endif %}
          </div>
        </div>
      </div>
    {% elif settings.customArrows %}
      <div class="splide__arrows">
        <button class="splide__arrow splide__arrow--prev">
          {{ Helpers.svg(settings.customArrow) }}
        </button>
        <button class="splide__arrow splide__arrow--next">
          {{ Helpers.svg(settings.customArrow) }}
        </button>
      </div>
    {% endif %}
  </div>
{% endmacro %}

{% set CAROUSEL_GALLERY_DEFAULTS = {
  className: 'splide-gallery'
} %}

{% macro CarouselGallery(settings = {}) %}
  {% set settings = merge(CAROUSEL_GALLERY_DEFAULTS, settings) %}
  {% set directive = 'x-carousel:gallery' %}

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