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

  {% if section.blocks.size > 0 %}
    <div class="logo-bar{% if section.settings.title_enable %} logo-bar--large{% endif %}">
      {% for block in section.blocks %}
        <div class="logo-bar__item{% if section.settings.title_enable %} logo-bar__item--large{% endif %}" {{ block.shopify_attributes }}>
          {% if block.settings.link != blank %}
            <a href="{{ block.settings.link }}" class="logo-bar__link">
          {% endif %}
          {% if block.settings.image != blank %}
            {{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
          {% else %}
            {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          {% if block.settings.link != blank %}
            </a>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% endif %}

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

{% schema %}
  {
    "name": "Logo list",
    "class": "index-section",
    "max_blocks": 20,
    "settings": [
  	  {
        "type": "header",
        "content": "Logo list [NEED HELP?](https:\/\/help.boostertheme.com\/hc\/en-us\/articles\/360002080894-How-to-setup-Logo-list-section-in-Booster-2-0)"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Logo list"
      }
    ],
    "blocks": [
      {
        "type": "logo_image",
        "name": "Logo",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link",
            "info": "Optional"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Logo list",
        "category": "Image",
        "blocks": [
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          },
          {
            "type": "logo_image"
          }
        ]
      }
    ]
  }
{% endschema %}
