{# 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: ['@container relative mx-auto flex flex-col items-stretch'],
    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',
        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',
        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 min-w-0',
      'gap-4 @sm:gap-6 @3xl:gap-8',
      '[&>*]:w-full [&>*]:min-w-0',
      '[&_.view-content]:grid [&_.view-content]:w-full [&_.view-content]:min-w-0',
      '[&_.view-content]:gap-4 [&_.view-content]:md:gap-6 [&_.view-content]:xl:gap-8'
    ],
    variants: {
      columns: {
        '1 column': 'grid-cols-1',
        '2 columns': 'md:grid-cols-2',
        '2 columns 75-25': 'md:grid-cols-[minmax(0,3fr)_minmax(0,1fr)]',
        '2 columns 25-75': 'md:grid-cols-[minmax(0,1fr)_minmax(0,3fr)]',
        '2 columns 67-33': 'md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]',
        '2 columns 33-67': 'md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)]',
        '3 columns': 'md:grid-cols-3',
        '4 columns': 'sm:grid-cols-2 lg:grid-cols-4',
        '5 columns': 'sm:grid-cols-2 lg:grid-cols-5',
        '6 columns': 'sm:grid-cols-3 lg:grid-cols-6'
      },
      mobileColumns: {
        '1': '',
        '2': 'grid-cols-2',
        '3': 'grid-cols-3'
      },
      viewsColumns: {
        '1 column': '',
        '2 columns': '[&_.view-content]:md:grid-cols-2',
        '3 columns': '[&_.view-content]:md:grid-cols-3',
        '4 columns': '[&_.view-content]:sm:grid-cols-2 [&_.view-content]:lg:grid-cols-4',
        '5 columns': '[&_.view-content]:sm:grid-cols-2 [&_.view-content]:lg:grid-cols-5',
        '6 columns': '[&_.view-content]:sm:grid-cols-3 [&_.view-content]:lg:grid-cols-6'
      }
    },
    compound_variants: [
      {
        columns: ['25-25-25-25'],
        mobileColumns: ['2'],
        class: 'sm:grid-cols-4'
      }
    ]
  )
%}

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

<section class="{{ section_classes }} cq-full">
  {# 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 [&_.cq-full]:mx-0 [&_.cq-full]:w-full">
    <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>
