{% # theme-check-disable MissingTemplate %}

{% assign sect = section.settings %}

{% style %}
  .section-{{ section.id }}-padding {
    padding-right: {{ sect.mobile_horizontal_padding }}px;
    padding-left: {{ sect.mobile_horizontal_padding }}px;
    padding-top: {{ sect.mobile_vertical_padding }}px;
    padding-bottom: {{ sect.mobile_vertical_padding }}px;
  }

  @media screen and (min-width: 768px) {
    .section-{{ section.id }}-padding {
      padding-right: {{ sect.tablet_horizontal_padding }}px;
      padding-left: {{ sect.tablet_horizontal_padding }}px;
      padding-top: {{ sect.tablet_vertical_padding }}px;
      padding-bottom: {{ sect.tablet_vertical_padding }}px;
    }
  }

  @media screen and (min-width: 1024px) {
    .section-{{ section.id }}-padding {
      padding-right: {{ sect.desktop_horizontal_padding }}px;
      padding-left: {{ sect.desktop_horizontal_padding }}px;
      padding-top: {{ sect.desktop_vertical_padding }}px;
      padding-bottom: {{ sect.desktop_vertical_padding }}px;
    }
  }
{% endstyle %}

{% style %}
  .section-{{ section.id }}-container-width {
    max-width: {{ sect.mobile_container_width_px }}px;
    margin-left: auto;
    margin-right: auto;
  }

  @media screen and (min-width: 768px) {
    .section-{{ section.id }}-container-width {
      max-width: {{ sect.tablet_container_width_px }}px;
      margin-left: auto;
      margin-right: auto;
    }
  }

  @media screen and (min-width: 1024px) {
    .section-{{ section.id }}-container-width {
      max-width: {{ sect.desktop_container_width_px }}px;
      margin-left: auto;
      margin-right: auto;
    }
  }
{% endstyle %}

{% style %}
  .section-{{ section.id }}-image-container-height {
    height: {{ sect.item_height }}px;
  }

  .section-{{ section.id }}-image-width {
    width: {{ sect.image_width }}px;
    height: auto;
  }
{% endstyle %}

{% capture container_padding_settings %}
  section-{{ section.id }}-padding
{% endcapture %}

{% capture image_width_settings %}
  section-{{ section.id }}-image-width
{% endcapture %}

{% capture container_width_settings %}
  section-{{ section.id }}-container-width
{% endcapture %}

{% capture image_container_height_settings %}
  section-{{ section.id }}-image-container-height
{% endcapture %}

<div class="apply-scheme {{ sect.color_scheme }} {{ container_padding_settings | strip }}">
  <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 {{ container_width_settings | strip }}">
    {% for block in section.blocks %}
      {% assign bloc = block.settings %}
      <div class="flex flex-col mb-6 md:mb-6 lg:mb-0">
        <div class="flex mb-4 {{ image_container_height_settings }} {{ bloc.image_position }}">
          {% render 'hw_generic-image', image: bloc.item_image, styles: image_width_settings %}
        </div>
        {% render 'hw_block-text', settings: block.settings, section_id: section.id, block_id: block.id %}
      </div>
    {% endfor %}
  </div>
</div>

{% schema %}
{
  "name": "Icons & text for 6",
  "class": "section",
  "settings": [
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "color-scheme-1",
          "label": "t:sections.all.settings.color_scheme.options__1.label"
        },
        {
          "value": "color-scheme-2",
          "label": "t:sections.all.settings.color_scheme.options__2.label"
        },
        {
          "value": "color-scheme-3",
          "label": "t:sections.all.settings.color_scheme.options__3.label"
        },
        {
          "value": "color-scheme-4",
          "label": "t:sections.all.settings.color_scheme.options__4.label"
        },
        {
          "value": "color-scheme-5",
          "label": "t:sections.all.settings.color_scheme.options__5.label"
        },
        {
          "value": "color-scheme-6",
          "label": "t:sections.all.settings.color_scheme.options__6.label"
        }
      ],
      "default": "color-scheme-3",
      "label": "t:sections.all.settings.color_scheme.label"
    },
    {
      "type": "range",
      "id": "image_width",
      "min": 0,
      "max": 256,
      "step": 4,
      "unit": "px",
      "label": "Image width in px",
      "default": 48
    },
    {
      "type": "range",
      "id": "item_height",
      "min": 0,
      "max": 256,
      "step": 4,
      "unit": "px",
      "label": "Image container height in px",
      "default": 48
    },
    {
      "type": "header",
      "content": "Container Max Width Settings"
    },
    {
      "type": "number",
      "id": "desktop_container_width_px",
      "default": 1024,
      "label": "Container max width in px (Desktop)"
    },
    {
      "type": "number",
      "id": "tablet_container_width_px",
      "default": 768,
      "label": "Container max width in px (Tablet)"
    },
    {
      "type": "number",
      "id": "mobile_container_width_px",
      "default": 640,
      "label": "Container max width in px (Mobile)"
    },
    {
      "type": "header",
      "content": "Container Padding Settings"
    },
    {
      "type": "range",
      "id": "desktop_horizontal_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Horizontal padding (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_horizontal_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Horizontal padding (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_horizontal_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Horizontal padding (Mobile)",
      "default": 0
    },
    {
      "type": "range",
      "id": "desktop_vertical_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Vertical padding (Desktop)",
      "default": 0
    },
    {
      "type": "range",
      "id": "tablet_vertical_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Vertical padding (Tablet)",
      "default": 0
    },
    {
      "type": "range",
      "id": "mobile_vertical_padding",
      "min": 0,
      "max": 512,
      "step": 8,
      "unit": "px",
      "label": "Vertical padding (Mobile)",
      "default": 0
    }
  ],
  "blocks": [
    {
      "type": "row_item",
      "name": "Row item",
      "limit": 10,
      "settings": [
        {
          "type": "image_picker",
          "id": "item_image",
          "label": "Item image",
          "info": "The item image can be PNG or SVG"
        },
        {
          "type": "select",
          "id": "image_position",
          "options": [
            {
              "value": "justify-start",
              "label": "Left"
            },
            {
              "value": "justify-center",
              "label": "Center"
            },
            {
              "value": "justify-end",
              "label": "Right"
            }
          ],
          "default": "justify-center",
          "label": "Image position"
        },
        {
          "type": "text",
          "id": "content",
          "default": "Item text",
          "label": "Item text"
        },
        {
          "type": "select",
          "id": "desktop_text_position",
          "options": [
            {
              "value": "",
              "label": "None"
            },
            {
              "value": "lg:text-left",
              "label": "Left"
            },
            {
              "value": "lg:text-center",
              "label": "Centered"
            },
            {
              "value": "lg:text-right",
              "label": "Right"
            }
          ],
          "default": "",
          "label": "Text position (Desktop)"
        },
        {
          "type": "select",
          "id": "tablet_text_position",
          "options": [
            {
              "value": "",
              "label": "None"
            },
            {
              "value": "md:text-left",
              "label": "Left"
            },
            {
              "value": "md:text-center",
              "label": "Centered"
            },
            {
              "value": "md:text-right",
              "label": "Right"
            }
          ],
          "default": "",
          "label": "Text position (Tablet)"
        },
        {
          "type": "select",
          "id": "mobile_text_position",
          "options": [
            {
              "value": "",
              "label": "None"
            },
            {
              "value": "text-left",
              "label": "Left"
            },
            {
              "value": "text-center",
              "label": "Centered"
            },
            {
              "value": "text-right",
              "label": "Right"
            }
          ],
          "default": "",
          "label": "Text position (Mobile)"
        },
        {
          "type": "select",
          "id": "font_family",
          "options": [
            {
              "value": "font-primary",
              "label": "Primary font"
            },
            {
              "value": "font-display",
              "label": "Secondary font"
            }
          ],
          "default": "font-primary",
          "label": "Font family"
        },
        {
          "type": "select",
          "id": "desktop_font_size",
          "options": [
            {
              "value": "lg:text-xs",
              "label": "Text 0.75rem"
            },
            {
              "value": "lg:text-sm",
              "label": "Text 0.875rem"
            },
            {
              "value": "lg:text-base",
              "label": "Text 1rem"
            },
            {
              "value": "lg:text-lg",
              "label": "Text 1.125rem"
            },
            {
              "value": "lg:text-xl",
              "label": "Text 1.25rem"
            },
            {
              "value": "lg:text-2xl",
              "label": "Text 1.5rem"
            },
            {
              "value": "lg:text-3xl",
              "label": "Text 1.875rem"
            },
            {
              "value": "lg:text-4xl",
              "label": "Text 2.25rem"
            },
            {
              "value": "lg:text-5xl",
              "label": "Text 3rem"
            },
            {
              "value": "lg:text-6xl",
              "label": "Text 3.75rem"
            },
            {
              "value": "lg:text-7xl",
              "label": "Text 4.5rem"
            },
            {
              "value": "lg:text-8xl",
              "label": "Text 6rem"
            },
            {
              "value": "lg:text-9xl",
              "label": "Text 8rem"
            }
          ],
          "default": "lg:text-base",
          "label": "Font size (Desktop)"
        },
        {
          "type": "select",
          "id": "tablet_font_size",
          "options": [
            {
              "value": "md:text-xs",
              "label": "Text 0.75rem"
            },
            {
              "value": "md:text-sm",
              "label": "Text 0.875rem"
            },
            {
              "value": "md:text-base",
              "label": "Text 1rem"
            },
            {
              "value": "md:text-lg",
              "label": "Text 1.125rem"
            },
            {
              "value": "md:text-xl",
              "label": "Text 1.25rem"
            },
            {
              "value": "md:text-2xl",
              "label": "Text 1.5rem"
            },
            {
              "value": "md:text-3xl",
              "label": "Text 1.875rem"
            },
            {
              "value": "md:text-4xl",
              "label": "Text 2.25rem"
            },
            {
              "value": "md:text-5xl",
              "label": "Text 3rem"
            },
            {
              "value": "md:text-6xl",
              "label": "Text 3.75rem"
            },
            {
              "value": "md:text-7xl",
              "label": "Text 4.5rem"
            },
            {
              "value": "md:text-8xl",
              "label": "Text 6rem"
            },
            {
              "value": "md:text-9xl",
              "label": "Text 8rem"
            }
          ],
          "default": "md:text-base",
          "label": "Font size (Tablet)"
        },
        {
          "type": "select",
          "id": "mobile_font_size",
          "options": [
            {
              "value": "text-xs",
              "label": "Text 0.75rem"
            },
            {
              "value": "text-sm",
              "label": "Text 0.875rem"
            },
            {
              "value": "text-base",
              "label": "Text 1rem"
            },
            {
              "value": "text-lg",
              "label": "Text 1.125rem"
            },
            {
              "value": "text-xl",
              "label": "Text 1.25rem"
            },
            {
              "value": "text-2xl",
              "label": "Text 1.5rem"
            },
            {
              "value": "text-3xl",
              "label": "Text 1.875rem"
            },
            {
              "value": "text-4xl",
              "label": "Text 2.25rem"
            },
            {
              "value": "text-5xl",
              "label": "Text 3rem"
            },
            {
              "value": "text-6xl",
              "label": "Text 3.75rem"
            },
            {
              "value": "text-7xl",
              "label": "Text 4.5rem"
            },
            {
              "value": "text-8xl",
              "label": "Text 6rem"
            },
            {
              "value": "text-9xl",
              "label": "Text 8rem"
            }
          ],
          "default": "text-base",
          "label": "Font size (Mobile)"
        },
        {
          "type": "select",
          "id": "desktop_font_weight",
          "options": [
            {
              "value": "lg:font-light",
              "label": "Font light"
            },
            {
              "value": "lg:font-normal",
              "label": "Font normal"
            },
            {
              "value": "lg:font-medium",
              "label": "Font medium"
            },
            {
              "value": "lg:font-semibold",
              "label": "Font semibold"
            },
            {
              "value": "lg:font-bold",
              "label": "Font bold"
            }
          ],
          "default": "lg:font-normal",
          "label": "Font weight (Desktop)"
        },
        {
          "type": "select",
          "id": "tablet_font_weight",
          "options": [
            {
              "value": "md:font-light",
              "label": "Font light"
            },
            {
              "value": "md:font-normal",
              "label": "Font normal"
            },
            {
              "value": "md:font-medium",
              "label": "Font medium"
            },
            {
              "value": "md:font-semibold",
              "label": "Font semibold"
            },
            {
              "value": "md:font-bold",
              "label": "Font bold"
            }
          ],
          "default": "md:font-normal",
          "label": "Font weight (Tablet)"
        },
        {
          "type": "select",
          "id": "mobile_font_weight",
          "options": [
            {
              "value": "font-light",
              "label": "Font light"
            },
            {
              "value": "font-normal",
              "label": "Font normal"
            },
            {
              "value": "font-medium",
              "label": "Font medium"
            },
            {
              "value": "font-semibold",
              "label": "Font semibold"
            },
            {
              "value": "font-bold",
              "label": "Font bold"
            }
          ],
          "default": "font-normal",
          "label": "Font weight (Mobile)"
        },
        {
          "type": "select",
          "id": "desktop_line_height",
          "options": [
            {
              "value": "lg:leading-p100",
              "label": "Line height 100%"
            },
            {
              "value": "lg:leading-p125",
              "label": "Line height 125%"
            },
            {
              "value": "lg:leading-p150",
              "label": "Line height 150%"
            },
            {
              "value": "lg:leading-p162_5",
              "label": "Line height 162.5%"
            },
            {
              "value": "lg:leading-p200",
              "label": "Line height 200%"
            }
          ],
          "default": "lg:leading-p100",
          "label": "Line height (Desktop)"
        },
        {
          "type": "select",
          "id": "tablet_line_height",
          "options": [
            {
              "value": "md:leading-p100",
              "label": "Line height 100%"
            },
            {
              "value": "md:leading-p125",
              "label": "Line height 125%"
            },
            {
              "value": "md:leading-p150",
              "label": "Line height 150%"
            },
            {
              "value": "md:leading-p162_5",
              "label": "Line height 162.5%"
            },
            {
              "value": "md:leading-p200",
              "label": "Line height 200%"
            }
          ],
          "default": "md:leading-p100",
          "label": "Line height (Tablet)"
        },
        {
          "type": "select",
          "id": "mobile_line_height",
          "options": [
            {
              "value": "leading-p100",
              "label": "Line height 100%"
            },
            {
              "value": "leading-p125",
              "label": "Line height 125%"
            },
            {
              "value": "leading-p150",
              "label": "Line height 150%"
            },
            {
              "value": "leading-p162_5",
              "label": "Line height 162.5%"
            },
            {
              "value": "leading-p200",
              "label": "Line height 200%"
            }
          ],
          "default": "leading-p100",
          "label": "Line height (Mobile)"
        },
        {
          "type": "color",
          "id": "text_font_color",
          "default": "rgba(0, 0, 0, 0)",
          "label": "Text font color"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Icons & text for 6"
    }
  ]
}
{% endschema %}