{% if (blocks|length) > 0 %}
  {% for i in blocks %}
    {% set separation = '' %}
    {% set blockId = null %}
    {% if indexCompenents %}
      {% set element = i %}
    {% else %}
      {% set blockId = i.blockId ?? blockId %}
      {% set element = i.element ?? i %}
    {% endif %}

    {% set separations = element.paddingAndMargin[0] ?? null %}
    {% set selector = 'data-component=' ~ element.type %}

    {% if separations %}
      {% for i in [
        'marginTop',
        'marginBottom',
        'paddingTop',
        'paddingBottom'
      ] %}
        {% set separation = separation ~ ' ' ~ separations[i] %}
      {% endfor %}
    {% endif %}

    {% include 'components/_' ~ element.type with {
      id: blockId,
      dataComponent: selector,
      component: element,
      index: loop,
      separation: separation
    } only %}

    {% if (element.border|length) > 0 %}
      <hr class="borderSection" />
    {% endif %}

    {% include 'components/_backgroundColorComponent' with {
      index: loop.index0,
      backgroudColor: element.backgroudColor,
      selectorClass: selector
    } only %}
  {% endfor %}
{% endif %}