{# Boolean for conditionals #}
{% set has_background_image = background_media is not empty and background_media.src is not empty %}
{# String for CVA variants #}
{% set has_background_image_variant = has_background_image ? 'yes' : 'no' %}

{% set section =
  html_cva(
    base: ['relative', 'flex', 'flex-col', 'items-stretch', 'mx-auto'],
    variants: {
      width: {
        '100%': 'lg:max-w-full',
        '90%': 'lg:max-w-9/10',
        '80%': 'lg:max-w-8/10',
        '75%': 'lg:max-w-3/4',
        '50%': 'lg:max-w-1/2'
      },
      marginBlockStart: {
        '0': 'mt-0',
        '8': 'mt-2',
        '20': 'mt-5',
        '32': 'mt-6 md:mt-7 xl:mt-8',
        '48': 'mt-8 md:mt-10 xl:mt-12',
        '64': 'mt-10 md:mt-13 xl:mt-16',
        '96': 'mt-16 md:mt-20 xl:mt-24',
        '128': 'mt-20 md:mt-24 xl:mt-32'
      },
      marginBlockEnd: {
        '0': 'mb-0',
        '8': 'mb-2',
        '20': 'mb-5',
        '32': 'mb-6 md:mb-7 xl:mb-8',
        '48': 'mb-8 md:mb-10 xl:mb-12',
        '64': 'mb-10 md:mb-13 xl:mb-16',
        '96': 'mb-16 md:mb-20 xl:mb-24',
        '128': 'mb-20 md:mb-24 xl:mb-32'
      },
      paddingBlockStart: {
        '0': 'pt-0',
        '16': 'pt-4',
        '32': 'pt-6 md:pt-7 xl:pt-8',
        '64': 'pt-10 md:pt-13 xl:pt-16'
      },
      paddingBlockEnd: {
        '0': 'pb-0',
        '16': 'pb-4',
        '32': 'pb-6 md:pb-7 xl:pb-8',
        '64': 'pb-10 md:pb-13 xl:pb-16'
      },
      backgroundColor: {
        primary: 'text-primary-foreground',
        secondary: 'text-secondary-foreground',
        accent: 'text-accent-foreground',
        muted: 'text-muted-foreground',
        noColor: 'text-foreground'
      }
    }
  )
%}

{% set section_classes =
  section.apply({
    marginBlockStart: margin_block_start,
    marginBlockEnd: margin_block_end,
    paddingBlockStart: padding_block_start,
    paddingBlockEnd: padding_block_end,
    backgroundColor: background_color|default('noColor')
  })
%}

{% set section_content =
  section.apply({
    width: width|default('100%')
  })
%}

{% set background =
  html_cva(
    base: ['absolute', 'inset-0', 'z-[-1]'],
    variants: {
      backgroundColor: {
        primary: 'bg-primary',
        secondary: 'bg-secondary',
        accent: 'bg-accent',
        muted: 'bg-muted',
        noColor: 'bg-none'
      },
      backgroundImage: {
        yes: 'opacity-50',
        no: ''
      }
    }
  )
%}

{% set background_classes =
  background.apply({
    backgroundColor: background_color|default('noColor'),
    backgroundImage: has_background_image_variant
  })
%}

{% set grid =
  html_cva(
    base: ['grid', 'w-full', 'gap-4', 'md:gap-6', 'xl:gap-8', 'min-w-0', '[&>*]:w-full', '[&>*]:min-w-0'],
    variants: {
      columns: {
        '100': 'grid-cols-1',
        '50-50': 'md:grid-cols-2',
        '33-33-33': 'md:grid-cols-3',
        '75-25': 'md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)]',
        '25-75': 'md:grid-cols-[minmax(0,1fr)_minmax(0,3fr)]',
        '67-33': 'md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]',
        '33-67': 'md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]',
        '50-25-25': 'md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_minmax(0,1fr)]',
        '25-25-50': 'md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_minmax(0,2fr)]',
        '25-25-25-25': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
      },
      mobileColumns: {
        '1': '',
        '2': 'grid-cols-2',
        '3': 'grid-cols-3'
      }
    }
  )
%}

{% set grid_classes =
  grid.apply({
    columns: columns|default('100'),
    mobileColumns: mobile_columns|default('1')
  })
%}

<section class="{{ section_classes }}">
  {# if there is background media #}
  {% if background_media is not empty and background_media.src is not empty %}
    {% block background_media_block %}
      <div class="absolute inset-0 z-[-1]">
        {% include 'canvas:image' ignore missing with {
          src: background_media.src,
          alt: background_media.alt,
          class: 'object-cover w-full h-full',
          width: background_media.width,
          height: background_media.height
        } only %}
      </div>
    {% endblock %}
  {% endif %}

  {# if there is background color (can work with or without background media) #}
  {% if background_color is not empty %}
    <div class="{{ background_classes }}"></div>
  {% endif %}

  <div class="container mx-auto px-4">
    <div class="{{ section_content }}">
      {% if section_header %}
        {% set header_content %}
          {% block header_slot %}

          {% endblock %}
        {% endset %}
        {% if header_content|trim is not empty %}
          <header class="mb-6 md:mb-8 xl:mb-10">
            {{ header_content }}
          </header>
        {% endif %}
      {% endif %}

      <div class="{{ grid_classes }}">
        {% block main_slot %}

        {% endblock %}
      </div>

      {% if section_footer %}
        {% set footer_content %}
          {% block footer_slot %}

          {% endblock %}
        {% endset %}
        {% if footer_content|trim is not empty %}
          <footer class="mt-6 md:mt-8 xl:mt-10">
            {{ footer_content }}
          </footer>
        {% endif %}
      {% endif %}
    </div>
  </div>
</section>
