{{ attach_library('droopler_theme/paragraph-d-p-side-by-side') }}

{% set base_class = side_by_side_base_class|default('d-p-side-by-side') %}
{% set modifiers = side_by_side_modifiers|default([]) %}
{% set has_heading = block('heading')|render|striptags('<img>')|trim is not empty %}

{% if with_grid %}
  {% set modifiers = modifiers|merge(['with-grid']) %}
{% endif %}

<section {{ bem(base_class, modifiers) }}>
  {{ title_prefix }}
  {{ title_suffix }}

  <div {{ bem('content', [], base_class, []) }}>
    <div {{ bem('header-container', [], base_class, ['container']) }}>
      <div {{ bem('header-row', [], base_class, ['row']) }}>
        <div {{ bem('header-column', [], base_class, ['col-12']) }}>
          {% if has_heading %}
            {% block heading %}
            {% endblock %}
            {% include 'droopler_theme:base-divider' %}
          {% endif %}

          {% block subheading %}
          {% endblock %}
        </div>
      </div>
    </div>

    <div {{ bem('content-wrapper', [], base_class) }}>
      <div {{ bem('content-container', [], base_class, ['container']) }}>
        <div {{ bem('content-row', [], base_class, ['row']) }}>
          {% block content %}
          {% endblock %}
        </div>
      </div>
    </div>

    <div {{ bem('cta-container', [], base_class, ['container']) }}>
      <div {{ bem('cta-row', [], base_class, ['row']) }}>
        {% block cta %}
        {% endblock %}
      </div>
    </div>
  </div>
</section>
