{% set classes = [
  'section',
] %}

{% if background_image_url is not empty %}
  {% set classes = classes|merge(['section--with-bg-image']) %}
{% endif %}

{% if scheme %}
  {% set classes = classes|merge(['section--color-' ~ scheme]) %}
{% else %}
  {% set classes = classes|merge(['section--color-default']) %}
{% endif %}

{% if section_classes is iterable %}
  {% set classes = classes|merge(section_classes) %}
{% endif %}

{# Set heading tag based on if they're first component or not. #}
{% set h = first_component ? 'h1' : 'h2' %}

{% set content_layout = content_layout is not empty ? content_layout : '' %}

{% set styles = [] %}
{% set bg_color = 'none' %}

{% if align_items %}
  {% set classes = classes|merge([
    'section--align-' ~ align_items,
  ]) %}
{% endif %}

{% set inner_box_class = disable_inner_box == true ? '' : 'box' %}

{# Section Template #}
<div class="{{ classes|join(' ')}}" style="{{ styles|join }}">
  {% if background_image_url is not empty %}
    <div class="section__image" style="--background-image: url('{{ background_image_url }}');"></div>
    {% if bg_tint is not empty %}
      <div class="section__tint"></div>
    {% endif %}
  {% endif %}
  <div class="section__content {{ inner_box_class }}">
    <div class="container stack">
      {% if brow_data or heading or text %}
        <div class="section__header">
          {% if brow_data is not empty %}
            {% include "@atoms/Brow/Brow.twig" with brow_data %}
          {% endif %}
          {% if heading is not empty %}
            <{{h}}>{{ heading }}</{{h}}>
          {% endif %}
          {% if text is not empty %}
            {{ text }}
          {% endif %}
        </div>
      {% endif %}
      {% if content_data is not empty %}
        <div class="section__main {{ content_layout }}" style="{{ content_styles|join }}">
          {% if content_data is iterable %}
            {% for item in content_data %}
              {{ item }}
            {% endfor %}
          {% elseif content_data|trim %}
            {{ content_data }}
          {% endif %}
        </div>
      {% endif %}
      {% if button_data is not empty %}
        <div class="section__button container">
          {% include "@atoms/Button/Button.twig" with {
            variant: button_data.variant,
            size: button_data.size,
            label: button_data.label,
            href: button_data.href,
          } %}
        </div>
      {% endif %}
    </div>
  </div>
</div>
