<section class="multi-image-section page-width padding-top-bottom" id="shopify-section-{{ section.id }}">
  <div class="multi-image-wrapper" style="gap: {{ section.settings.image_gap }}px;">
    {% for block in section.blocks %}
      {% if block.settings.image != blank %}
        <div class="multi-image-item">
          {% if block.settings.image_link != blank %}<a href="{{ block.settings.image_link }}">{% endif %}
          <img 
            src="{{ block.settings.image | img_url: '600x' }}" 
            alt="Image {{ forloop.index }}" 
            style="width:100%; max-width: {{ block.settings.image_max_width }}px;">
          {% if block.settings.image_link != blank %}</a>{% endif %}
        </div>
      {% endif %}
    {% endfor %}
  </div>
</section>

<style>
#shopify-section-{{ section.id }}.padding-top-bottom {
  padding-top: {{ section.settings.topMargin }}px;
  padding-bottom: {{ section.settings.bottomMargin }}px;
  background-color: {{ section.settings.section_bg_color }};
}

.multi-image-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.multi-image-item {
  flex: 1 1 calc(12.5% - {{ section.settings.image_gap }}px); 
  box-sizing: border-box;
}

.multi-image-item img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .multi-image-item {
    flex: 1 1 calc(25% - {{ section.settings.image_gap }}px); 
  }
}

@media (max-width: 767px) {
  #shopify-section-{{ section.id }}.padding-top-bottom {
    padding-top: {{ section.settings.topMarginMobile }}px;
    padding-bottom: {{ section.settings.bottomMarginMobile }}px;
  }
  .multi-image-item {
    flex: 1 1 calc(50% - {{ section.settings.image_gap }}px);
  }
}
</style>

{% schema %}
{
  "name": "Multi Images Blocks",
  "settings": [
    {
      "type": "range",
      "id": "topMargin",
      "label": "Top Padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 50,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "bottomMargin",
      "label": "Bottom Padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 50,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "topMarginMobile",
      "label": "Mobile Top Padding",
      "min": 0,
      "max": 80,
      "step": 1,
      "default": 30,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "bottomMarginMobile",
      "label": "Mobile Bottom Padding",
      "min": 0,
      "max": 80,
      "step": 1,
      "default": 30,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "image_gap",
      "label": "Gap Between Images (px)",
      "min": 0,
      "max": 50,
      "step": 1,
      "default": 10
    },
    {
      "type": "color",
      "id": "section_bg_color",
      "label": "Background Color",
      "default": "#ffffff"
    }
  ],
  "blocks": [
    {
      "type": "image_block",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "image_link",
          "label": "Image Link"
        },
        {
          "type": "range",
          "id": "image_max_width",
          "label": "Image Max Width (px)",
          "min": 50,
          "max": 1000,
          "step": 10,
          "default": 200
        }
      ]
    }
  ],
  "max_blocks": 8,
  "presets": [
    {
      "name": "Multi Images Blocks"
    }
  ]
}
{% endschema %}
