{% liquid
  assign section_name = 'Banners'
  assign el_id = section_name | handle | append: '-' | append: section.id

  assign section_padding = section.settings.padding
  assign padding_class = 'sp-' | append: section_padding
  if section.settings.top_half_padding
    assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
  endif
  if section.settings.bottom_half_padding
    assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
  endif
  if section.settings.bg_overlay
    assign bg_overlay = 'bg-overlay'
  endif

  assign has_content = false
  assign filled_blocks = 0
  for block in section.blocks
    if block.settings.title != blank or block.settings.image != blank or block.settings.text != blank
      assign has_content = true
      assign filled_blocks = filled_blocks | plus: 1
    endif
  endfor
%}

{% if has_content %}

<style>
    @media screen and (min-width: 1024px) {
        #{{ el_id }} .banners-divider {
            width: 1px;
            height: 100%;
            background: var(--light-grey);
            position: absolute;
            left: 50%;
            top: 0;
        }
        #{{ el_id }} .banner-item {
            width: calc(50% - 40px);
        }
    }
</style>

<div id="{{ el_id }}" class="{{ padding_class }} {{ bg_overlay }}">
  <div class="container">
    <div class="flex flex-column pl-35 pr-35 d-pl-0 d-pr-0 t-ai-center d-flex-row {% if filled_blocks == 1 %}d-jc-center{% else %}d-jc-even{% endif %} rowgap-50 relative">
      {% for block in section.blocks %}
        {% if block.settings.title != blank or block.settings.image != blank or block.settings.text != blank %}
        <div class="banner-item t-max-400 flex flex-column ai-center">
          {% if block.settings.image != blank %}
            {% assign image_alt = block.settings.title | escape %}
            <div class="pb-20 w-full">
              {% if block.settings.link_url != blank %}
                <a href="{{ block.settings.link_url }}">
              {% endif %}
              {% render 'global-image-wrapper', image: block.settings.image, image_alt: image_alt %}

              {% if block.settings.link_url != blank %}
                </a>
              {% endif %}
            </div>
          {% endif %}
          {% comment %} {% if forloop.first and filled_blocks > 1 %}
            <div class="banners-divider hide-m show-d"></div>
          {% endif %} {% endcomment %}

          <div class="h5 pb-20 tc">{{ block.settings.title }}</div>
          <p class="p3 pb-15 tc">{{ block.settings.text }}</p>
          {% if block.settings.link_label != blank %}
                <a href="{{ block.settings.link_url }}" class="link1 uppercase tc">{{ block.settings.link_label }}</a>
          {% endif %}
        </div>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

{% endif %}

{% schema %}
{
  "name": "Banners",
  "settings": [
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "select",
      "id": "padding",
      "label": "Padding",
      "options": [
        {
          "value": "no",
          "label": "No"
        },
        {
          "value": "sm",
          "label": "Small"
        },
        {
          "value": "md",
          "label": "Med"
        },
        {
          "value": "lg",
          "label": "Large"
        }
      ],
      "default": "lg"
    },
    {
      "type": "checkbox",
      "id": "top_half_padding",
      "label": "Top half padding",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "bottom_half_padding",
      "label": "Bottom half padding",
      "default": false
    },
    {
      "type": "header",
      "content": "General Settings"
    },
    {
      "type": "checkbox",
      "id": "bg_overlay",
      "label": "Background Overlay",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "banner",
      "name": "Banner",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Text"
        },
        {
          "type": "text",
          "id": "link_label",
          "label": "Link Label"
        },
        {
          "type": "url",
          "id": "link_url",
          "label": "Link URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Banners",
      "blocks": []
    }
  ]
}
{% endschema %}