{# Default values #}
{% set container_type = container_type|default('container mx-auto') %}
{% set background_color = background_color|default('bg-white') %}

{% set grid_cols = grid_cols|default(1) %}
{% set grid_cols_2xl = grid_cols_2xl|default(4) %}
{% set grid_cols_xl = grid_cols_xl|default(4) %}
{% set grid_cols_lg = grid_cols_lg|default(3) %}
{% set grid_cols_md = grid_cols_md|default(2) %}
{% set grid_cols_sm = grid_cols_sm|default(1) %}

{% set gap = gap|default(0) %}
{% set gap_2xl = gap_2xl|default(4) %}
{% set gap_xl = gap_xl|default(4) %}
{% set gap_lg = gap_lg|default(4) %}
{% set gap_md = gap_md|default(2) %}
{% set gap_sm = gap_sm|default(0) %}

{# Grid utility classes #}
{% set grid_classes = [
  'grid',
  'gap-4',
  gap ? 'gap-' ~ gap,
  gap_2xl ? '2xl:gap-' ~ gap_2xl,
  gap_xl ? 'xl:gap-' ~ gap_xl,
  gap_lg ? 'lg:gap-' ~ gap_lg,
  gap_md ? 'md:gap-' ~ gap_md,
  gap_sm ? 'sm:gap-' ~ gap_sm,
  grid_cols ? 'grid-cols-' ~ grid_cols,
  grid_cols_2xl ? '2xl:grid-cols-' ~ grid_cols_2xl,
  grid_cols_xl ? 'xl:grid-cols-' ~ grid_cols_xl,
  grid_cols_lg ? 'lg:grid-cols-' ~ grid_cols_lg,
  grid_cols_md ? 'md:grid-cols-' ~ grid_cols_md,
  grid_cols_sm ? 'sm:grid-cols-' ~ grid_cols_sm
] %}
{% set grid_classes_attributes = create_attribute().addClass(grid_classes) %}

{# Add background utility classes #}
{% set attributes = attributes
  .addClass(background_size, background_position, background_repeat)
  .addClass(background_color) %}

{% if background_image %}
  {% set attributes = attributes.setAttribute('style', 'background-image: url(' ~ background_image ~ ')') %}
{% endif %}

<section {{ attributes.addClass(container_type != 'bg-breakout' ? grid_classes, container_type) }}>
  {% if container_type == 'bg-breakout' %}
    <div {{ grid_classes_attributes.addClass('container', 'mx-auto') }}>
  {% endif %}

  <!-- ITEMS -->
  {{ items }}
  <!-- END ITEMS -->

  {% if container_type == 'bg-breakout' %}
    </div>
  {% endif %}
</section>
