{# 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 is_restricted = restrict_width ? 'yes' : 'no' %}
{% set is_reverse = reverse_mobile ? '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',
        '70%': 'lg:max-w-7/10',
        '60%': 'lg:max-w-6/10',
        '50%': 'lg:max-w-1/2'
      },
      marginBlockStart: {
        '-48': '-md:mt-10 -xl:mt-12 -mt-8',
        '-20': '-mt-5',
        '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',
        '64': 'pt-10 md:pt-12 xl:pt-16'
      },
      paddingBlockEnd: {
        '0': 'pb-0',
        '16': 'pb-4',
        '32': 'pb-6',
        '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',
        white: 'text-foreground',
        noColor: 'text-foreground'
      },
      restrictedWidth: {
        no: 'cq-full'
      }
    }
  )
%}

{% 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'),
    restrictedWidth: is_restricted
  })
%}

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

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

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

{% set section_image =
  html_cva(
    base: ['h-full w-full object-cover'],
    variants: {
      overlay: {
        noColor: 'opacity-70'
      },
      restrictedWidth: {
        yes: 'rounded-md'
      }
    },
    compound_variants: [
      {
        backgroundColor: ['primary', 'secondary', 'accent', 'muted', 'white'],
        class: 'grayscale-75'
      }
    ]
  )
%}

{% 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'
      },
      reverseMobile: {
        yes: '[&>*:first-child]:order-1 md:[&>*:first-child]:-order-1 [&>*:last-child]:-order-1 md:[&>*:last-child]:order-1'
      }
    },
    compound_variants: [
      {
        columns: ['4 columns'],
        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'),
    reverseMobile: is_reverse
  })
%}

<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: section_image.apply({
            restrictedWidth: is_restricted,
            backgroundColor: background_color|default('noColor')
          }),
          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 [&_.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>
