
<div class="page-width">
  {% if section.settings.title != blank %}
    <div class="section-header text-{{settings.title_position}}">
      <h2 class="title">{{ section.settings.title | escape }}</h2>
    </div>
  {% endif %}

  <div class="grid {% unless section.blocks.size == 5 %}grid--uniform{% endunless %} grid--flush-bottom">
    {%- assign grid_item_width = 'medium-up--one-third' -%}
    {%- assign max_height = 345 -%}
    {% case section.blocks.size %}
      {% when 1 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
        {%- assign max_height = 530 -%}
      {% when 2 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
        {%- assign max_height = 530 -%}
      {% when 4 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
        {%- assign max_height = 530 -%}
    {% endcase %}
    {% for block in section.blocks %}
      {% if section.blocks.size == 5 and forloop.index < 3 %}
        {%- assign column_width = 'medium-up--one-half' -%}
        {%- assign max_height = 530 -%}
      {% else %}
        {%- assign column_width = grid_item_width -%}
      {% endif %}
      <div class="grid__item {{ column_width }} text-{{ section.settings.align_text }}" {{ block.shopify_attributes }}>
        {% if block.settings.enable_image %}
          {% if block.settings.image != blank %}
            {% capture img_id %}TextColumnImage-{{ block.id }}{% endcapture %}
            {% capture wrapper_id %}TextColumnImageWrapper-{{ block.id }}{% endcapture %}
            {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            {% include 'image-style' with image: block.settings.image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
            <div id="{{ wrapper_id }}" class="feature-row__image-wrapper js">
              <div style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%;">
                <img id="{{ img_id }}"
                     class="feature-row__image lazyload"
                     src="{{ block.settings.image | img_url: '300x300' }}"
                     data-src="{{ img_url }}"
                     data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                     data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                     data-sizes="auto"
                     alt="{{ block.settings.image.alt | escape }}">
              </div>
            </div>
            <noscript>
              <p>
                {{ block.settings.image | img_url: '480x480', scale: 2 | img_tag: block.settings.image.alt, 'feature-row__image' }}
              </p>
            </noscript>
          {% else %}
            <p>
              {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
            </p>
          {% endif %}
        {% endif %}
        {% if block.settings.title != blank %}
          <h3 class="heading">{{ block.settings.title | escape }}</h3>
        {% endif %}
        {% if block.settings.text != blank %}
          <div class="rte-setting">{{ block.settings.text }}</div>
        {% endif %}
        {% if block.settings.button_label != blank and block.settings.button_link != blank %}
        <style>
          .text_image_btn-{{block.id}} {
            {% if block.settings.full_btn %}
            width:100%;
            {% endif %}
            {% if block.settings.transparent_btn %}
            background: transparent;
            color: {{ settings.color_body_text }};
            border: 1px solid {{ settings.color_body_text }};
            {% endif %}
          }
          .column_btn{
            text-align:{{ section.settings.align_button }};
          }
        </style>
        <div class="column_btn">
          <a href="{{ block.settings.button_link }}" class="btn btn--small text_image_btn-{{block.id}}">
            {{ block.settings.button_label | escape }}
          </a>
        </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>

  {% if section.blocks.size == 0 %}
    {% include 'no-blocks' %}
  {% endif %}
</div>

{% schema %}
  {
    "name": "Text columns with images",
    "class": "index-section",
    "settings": [
      {
        "type": "header",
        "content": "Text columns with images [NEED HELP?](https:\/\/help.boostertheme.com\/hc\/en-us\/articles\/360002081194-How-to-setup-Text-Column-with-Images-section-in-Booster-2-0)"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Text columns with images"
      },
      {
        "type": "select",
        "id": "align_text",
        "label": "Text alignment",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Centered"
          }
        ]
      },
      {
        "type": "select",
        "id": "align_button",
        "label": "Button position",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ]
      }
    ],
    "blocks": [
      {
        "type": "text_block",
        "name": "Column",
        "settings": [
          {
            "type": "checkbox",
            "id": "enable_image",
            "label": "Show image",
            "default": true
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Add a title or tagline"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Share blog posts, products, or promotions with your customers. Use this text to describe products, share details on availability and style, or as a space to display recent reviews or FAQs.</p>"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link"
          },
          {
            "type": "header",
            "content": "Button Style"
          },
		  {
            "type": "checkbox",
            "id": "full_btn",
            "label": "Full Button"
          },
		  {
            "type": "checkbox",
            "id": "transparent_btn",
            "label": "Transparent Button"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Text columns with images",
        "category": "Text",
        "blocks": [
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          }
        ]
      }
    ]
  }
{% endschema %}
