<section class="page-width multi-block-grid padding-top-bottom {% if section.settings.show_bottom_border %}with-border{% endif %}" id="shopify-section-{{ section.id }}" style="background-color: {{ section.settings.section_bg_color }};">
  <div class="multi-block-grid-wrapper">
    <div class="multi-block-grid__wrapper columns-{{ section.settings.columns }} text-{{ section.settings.text_align }}">
      {% for block in section.blocks %}
        <div class="multi-block-grid__item">
          {% if block.settings.heading != blank %}
            <h3 class="block-heading">{{ block.settings.heading }}</h3>
          {% endif %}
          
          {%  if block.settings.img_link != blank %}
            <a href="{{ block.settings.img_link }}">
          {% endif %}
            {% if block.settings.image != blank %}
              <div class="block-image">
                <img src="{{ block.settings.image | img_url: '600x' }}" alt="{{ block.settings.heading }}" width="" height="">
              </div>
            {% endif %}
            {% if block.settings.logo_image != blank %}
              <div class="block-logo-image">
                <img src="{{ block.settings.logo_image | img_url: '600x' }}" alt="{{ block.settings.logo_image }}" width="" height="">
              </div>
            {% endif %}
          {%  if block.settings.img_link != blank %}
          </a>
          {% endif %}
          {%  if block.settings.link != blank %}
            <a href="{{ block.settings.link }}">
          {% endif %}
            {% if block.settings.title != blank %}
              <div class="block-title">{{ block.settings.title }}</div>
            {% endif %}
          {%  if block.settings.link != blank %}
          </a>
          {% endif %}
          {% if block.settings.text != blank %}
            <div class="block-text">{{ block.settings.text }}</div>
          {% endif %}
          {% if block.settings.button_text != blank %}
            <a class="custom-btn block-btn" href="{{ block.settings.button_link }}">{{ block.settings.button_text }}</a>
          {% endif %}
          {% if block.settings.view_product_image != blank %}
              <div class="block-view-product-image">
                {% if block.settings.button_link != blank %}
                <a href="{{ block.settings.button_link }}">
                  {% endif %}
                <img src="{{ block.settings.view_product_image | img_url: '800x' }}" alt="{{ block.settings.view_product_image }}" width="" height="">
                {% if block.settings.button_link != blank %}
                </a>
                {% endif %}
              </div>
            {% endif %}
        </div>
      {% endfor %}
    </div>
    {% if section.settings.button_text != blank %}
    <a class="custom-btn section-btn text-{{ section.settings.text_align }}"
      href="{{ section.settings.button_link }}"
      style="background-color: {{ section.settings.button_bg_color }} !important; color: {{ section.settings.button_text_color }} !important;">
      {{ section.settings.button_text }}
    </a>
  {% endif %}
  </div>
</section>

<style>
#shopify-section-{{ section.id }}.padding-top-bottom {
  padding-top: {{ section.settings.topMargin }}px;
  padding-bottom: {{ section.settings.bottomMargin }}px;
}

#shopify-section-{{ section.id }}.with-border {
  border-bottom: {{ section.settings.border_thickness }}px solid {{ section.settings.border_color }};
}

#shopify-section-{{ section.id }} .multi-block-grid__wrapper {
  display: grid;
  gap: 30px;
}

#shopify-section-{{ section.id }} .multi-block-grid__wrapper.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}
#shopify-section-{{ section.id }} .multi-block-grid__wrapper.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}
#shopify-section-{{ section.id }} .multi-block-grid__wrapper.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

#shopify-section-{{ section.id }} .multi-block-grid__wrapper.text-left {
  text-align: left;
}
#shopify-section-{{ section.id }} .multi-block-grid__wrapper.text-center {
  text-align: center;
}
#shopify-section-{{ section.id }} .multi-block-grid__wrapper.text-right {
  text-align: right;
}

#shopify-section-{{ section.id }} .multi-block-grid__item {
  padding: 20px;
}
#shopify-section-{{ section.id }} .multi-block-grid__item *{
color: {{ section.settings.section_text_color }} !important;
}
#shopify-section-{{ section.id }} .multi-block-grid__item a{
  color:#000;
  text-decoration: none;
}
#shopify-section-{{ section.id }} .multi-block-grid__item a:hover{
  color:#105028;
}
#shopify-section-{{ section.id }} .block-heading {
  font-size: 20px;
  margin-bottom: 10px;
}

#shopify-section-{{ section.id }} .block-image img {
  max-width: 100%;
  height: 300px;
  margin-bottom: 15px;
}

#shopify-section-{{ section.id }} .block-logo-image img {
  max-width: 100%;
  height: inherit;
  margin-bottom: 15px;
}

#shopify-section-{{ section.id }} .block-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

#shopify-section-{{ section.id }} .block-text {
  font-size: 14px;
  color: #555;
}
#shopify-section-{{ section.id }} .custom-btn.section-btn.text-center {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
}
@media (max-width: 767px) {
  #shopify-section-{{ section.id }} .multi-block-grid__wrapper.columns-2,
  #shopify-section-{{ section.id }} .multi-block-grid__wrapper.columns-3,
  #shopify-section-{{ section.id }} .multi-block-grid__wrapper.columns-4 {
    grid-template-columns: 1fr 1fr;
  }
}
</style>

{% schema %}
{
  "name": "Multi Block Grid",
  "settings": [
    {
      "type": "select",
      "id": "columns",
      "label": "Columns per row",
      "default": "4",
      "options": [
        { "value": "2", "label": "2 Columns" },
        { "value": "3", "label": "3 Columns" },
        { "value": "4", "label": "4 Columns" }
      ]
    },
    {
      "type": "select",
      "id": "text_align",
      "label": "Text Alignment",
      "default": "center",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ]
    },
    {
      "type": "range",
      "id": "topMargin",
      "label": "Top Padding",
      "min": 0,
      "max": 100,
      "default": 50,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "bottomMargin",
      "label": "Bottom Padding",
      "min": 0,
      "max": 100,
      "default": 50,
      "unit": "px"
    },
    {
      "type": "color",
      "id": "section_bg_color",
      "label": "Background Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "section_text_color",
      "label": "Text Color"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button text"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button Link"
    },
    {
      "type": "color",
      "id": "button_bg_color",
      "label": "Button background color"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button text color"
    },
    {
      "type": "checkbox",
      "id": "show_bottom_border",
      "label": "Show Bottom Border",
      "default": false
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border Color",
      "default": "#eaeaea"
    },
    {
      "type": "range",
      "id": "border_thickness",
      "label": "Border Thickness (px)",
      "min": 1,
      "max": 10,
      "default": 1,
      "unit": "px"
    }
  ],
  "blocks": [
    {
      "type": "block",
      "name": "Content Block",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Heading"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "img_link",
          "label": "Image link"
        },
        {
          "type": "image_picker",
          "id": "logo_image",
          "label": "Logo Image"
        },
        {
          "type": "richtext",
          "id": "title",
          "label": "Title",
          "default": "<h4>Callaway Paradym Ai Smoke Triple Diamond</h4>"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text"
        },
        {
          "type": "image_picker",
          "id": "view_product_image",
          "label": "View product image"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Multi Block Grid",
      "blocks": [
        { "type": "block" },
        { "type": "block" },
        { "type": "block" },
        { "type": "block" }
      ]
    }
  ]
}
{% endschema %}
