{% load wagtailcore_tags wagtailimages_tags jetstream_tags %}

<div class="row-wrapper {{ self.style }}
  {% if self.background.background_color or self.background.background_image %} bg {% endif %}
  {% if self.background.background_color and not self.background.background_image %} bg-color-{{ self.background.background_color }}{% endif %}
"
  {% if self.background.background_image %}
    {% image self.background.background_image original as img_data %}
    style="background-image: url('{{ img_data.url }}');"
  {% endif %}
>
  <div class="row gutter-{{ self.gutter_width }}px">
    {% subtract_from_twelve self.column_one_width self.column_two_width self.column_three_width as fill_width %}
    <div class="four-col-item grid-item col-md-{{ self.column_one_width }} col-sm-{{ self.column_one_width }}">
      {% for block in self.column_one %}
        {% if block.block_type == 'heading' %}
          <h1>{{ block.value }}</h1>
        {% else %}
          <section class="block-{{ block.block_type }}">
            {% if parent_width %}
              {% width_from_arbitrary_parent parent_width self.column_one_width self.gutter_width as my_width %}
              {% include_block block with parent_width=my_width parent_height=self.fixed_height parent_gutter_width=self.gutter_width %}
            {% else %}
              {% width_from_arbitrary_parent 1000 self.column_one_width self.gutter_width as my_width %}
              {% include_block block with parent_width=my_width parent_height=self.fixed_height parent_gutter_width=self.gutter_width %}
            {% endif %}
          </section>
        {% endif %}
      {% endfor %}
    </div>
    <div class="four-col-item grid-item col-md-{{ self.column_two_width }} col-sm-{{ self.column_two_width }}">
      {% for block in self.column_two %}
        {% if block.block_type == 'heading' %}
          <h1>{{ block.value }}</h1>
        {% else %}
          <section class="block-{{ block.block_type }}">
            {% if parent_width %}
              {% width_from_arbitrary_parent parent_width self.column_two_width self.gutter_width as my_width %}
              {% include_block block with parent_width=my_width parent_height=self.fixed_height parent_gutter_width=self.gutter_width %}
            {% else %}
              {% width_from_arbitrary_parent 1000 self.column_two_width self.gutter_width as my_width %}
              {% include_block block with parent_width=my_width parent_height=self.fixed_height parent_gutter_width=self.gutter_width %}
            {% endif %}
          </section>
        {% endif %}
      {% endfor %}
    </div>
    <div class="four-col-item grid-item col-md-{{ self.column_three_width }} col-sm-{{ self.column_three_width }}">
      {% for block in self.column_three %}
        {% if block.block_type == 'heading' %}
          <h1>{{ block.value }}</h1>
        {% else %}
          <section class="block-{{ block.block_type }}">
            {% if parent_width %}
              {% width_from_arbitrary_parent parent_width self.column_three_width self.gutter_width as my_width %}
              {% include_block block with parent_width=my_width parent_height=self.fixed_height parent_gutter_width=self.gutter_width %}
            {% else %}
              {% width_from_arbitrary_parent 1000 self.column_three_width self.gutter_width as my_width %}
              {% include_block block with parent_width=my_width parent_height=self.fixed_height parent_gutter_width=self.gutter_width %}
            {% endif %}
          </section>
        {% endif %}
      {% endfor %}
    </div>
    <div class="four-col-item grid-item col-md-{{ fill_width }} col-sm-{{ fill_width }}">
      {% for block in self.column_four %}
        {% if block.block_type == 'heading' %}
          <h1>{{ block.value }}</h1>
        {% else %}
          <section class="block-{{ block.block_type }}">
            {% if parent_width %}
              {% width_from_arbitrary_parent parent_width fill_width self.gutter_width as my_width %}
              {% include_block block with parent_width=my_width parent_height=self.fixed_height parent_gutter_width=self.gutter_width %}
            {% else %}
              {% width_from_arbitrary_parent 1000 fill_width self.gutter_width as my_width %}
              {% include_block block with parent_width=my_width parent_height=self.fixed_height parent_gutter_width=self.gutter_width %}
            {% endif %}
          </section>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>
