{# LIBRARIES #}
{{ attach_library('ui_patterns/rows_cols.rows_cols_lib') }}

{# VARIABLES #}
{% set batch = batch|default(3) %}
{% set col_width = (12 / batch) %}
{% set row_class = row_class|default("mb-4") %}
{% set col_class = col_class|default(false) %}
{% set col_breakpoint = col_breakpoint|default('md') %}
{% set wrapper_class = wrapper_class|default('') %}
{% set scrolling_mobile = scrolling_mobile|default(false) %}
{% set scrolling_mobile_breakpoint = scrolling_mobile_breakpoint|default('lg') %}
{% set scrolling_dots = scrolling_dots|default(false) %}
{% set rows = items|batch(batch) %}

{# If we are using scrolling, we need to attach the library and set the classes #}

{% if scrolling_mobile %}
  {% set rows = []|merge([items]) %}
  {{ attach_library('ui_patterns/scrolling_indicator.scrolling_indicator_lib') }}
  {% set wrapper_class = wrapper_class ~ ' mobile-slider-' ~ scrolling_mobile_breakpoint %}
  {% set row_class = row_class ~ ' mobile-slider__track' %}
  {% set col_class = col_class ~ ' mobile-slider__slide' %}
{% endif %}

{# TEMPLATE #}
{% if items %}
  {# we only need a wrapper if we are passing a class such as container #}
  {% if wrapper_class or auto_height %}
    <div class="{{ auto_height ? 'auto-height' }} {{ wrapper_class }}">
  {% endif %}

  {% for row in rows %}
    <div class="row {{ row_class }}">
      {% for item in row %}
        <div class="{{ col_class ? col_class : 'col-'~col_breakpoint~'-'~col_width }}" data-slide-index="{{ loop.index0 }}">
          {{ item|raw }}
        </div>
      {% endfor %}
    </div>
    {% if scrolling_dots %}
      <div class="mobile-slider__dots">
        {% for slide in row %}
          <span class="mobile-slider__dot{% if loop.first %} mobile-slider__dot--active{% endif %}" data-dot-index="{{ loop.index0 }}"></span>
        {% endfor %}
      </div>
    {% endif %}
  {% endfor %}
  {% if wrapper_class or auto_height %}
    </div>
  {% endif %}
{% endif %}
