{{ 'hdt-icon-box.css' | asset_url | stylesheet_tag }}
{% style %}
  #{{ section.id }}{
    --section-pt: {{ section.settings.padding_top }}px;
    --section-pb: {{ section.settings.padding_bottom }}px; 
    --section-prate: {{ section.settings.padding_rate }};
    --spacing-item-dk: {{ section.settings.spacing_dk }}px;
    --spacing-item-tb: {{ section.settings.spacing_tb }}px;
    --spacing-item-mb: {{ section.settings.spacing_mb }}px;
  }
{% endstyle %}
{%- if section.settings.carousel_mobile -%}
  {%- capture scrollsnap_dots -%}
    <div class="hdt-icon-box__scrollsnap-dots hdt-scrollsnap-dots hdt-text-center hdt-hidden">
      {%- for block in section.blocks -%}
        <button class="hdt-scrollsnap-dot__link hdt-scrollsnap-dot"></button> 
      {%- endfor -%}
    </div>
  {%- endcapture -%}
  {%- assign sm_snap_flex = ' sm:hdt-snap-flex' -%}
{%- endif -%}
{%- liquid
  
-%}
<div id="{{ section.id }}" class="hdt-s-inner {% if section.settings.color_wrap != 'container' %} hdt-s-gradient hdt-section-spacing{% endif %}" color-scheme="{{ section.settings.color_scheme }}" hdt-reveal="fade-in">
  <div class="hdt-container">
    <hdt-scrollsnap class="{% if section.settings.color_wrap == 'container' %} hdt-s-gradient hdt-rounded hdt-section-spacing{% endif %}">
      {% content_for 'block', type: 'section-heading', id: 'icon-box' %}
      <div id="Scroller-{{ section.id }}" class="hdt-text-{{ section.settings.content_align }} {% if section.settings.icon_circle %} hdt-icon-box__icon-circle{% endif %} hdt-icon-box__border-{{ section.settings.border_style }} hdt-row-flex hdt-flex-cols-{{ section.settings.col_mb }} md:hdt-flex-cols-{{ section.settings.col_tb }} lg:hdt-flex-cols-{{ section.settings.col_dk }} hdt-spacing-x md:hdt-justify-center hdt-scroll-snap hdt-snap-x{{ sm_snap_flex }}">
        {% content_for "blocks" %}
      </div>
      {{- scrollsnap_dots -}}
    </hdt-scrollsnap>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.icon-box.name",
  "class": "hdt-section hdt-icon-box",
  "max_blocks": 6,
  "disabled_on": {
    "groups": [
      "*"
    ]
  },
  "blocks": [
    { 
      "type": "_icon_block" 
    },
  ],
  "settings": [
    {
      "type": "header",
      "content": "Item settings"
    },
    {
      "type":"checkbox",
      "id":"icon_circle",
      "label": "t:sections.icon-box.settings.icon_circle.label"
    },
    {
      "type": "select",
      "id": "border_style",
      "label": "Border style",
      "options": [
        {
          "value": "none",
          "label": "None"
        },
        {
          "value": "style_1",
          "label": "Style 1"
        },
        {
          "value": "style_2",
          "label": "Style 2"
        }
      ],
      "default": "none"
    },
    {
      "type": "checkbox",
      "id": "icon_vertical",
      "label": "Icon vertical",
      "default": false,
      "info": "Alway vertical on mobile"
    },
    {
      "type": "checkbox",
      "id": "carousel_mobile",
      "label": "Carousel on mobile",
      "default": false
    },
    {
      "type": "select",
      "id": "col_dk",
      "label": "Item per row desktop",
      "options": [
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        },
        {
          "value": "6",
          "label": "6"
        },
      ],
      "default": "3"
    },
    {
      "type": "select",
      "id": "col_tb",
      "label": "Item per row tablet",
      "options": [
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        },
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "5",
          "label": "5"
        },
        {
          "value": "6",
          "label": "6"
        },
      ],
      "default": "3"
    },
    {
      "type": "select",
      "id": "col_mb",
      "label": "Item per row mobile",
      "options": [
        {
          "value": "1",
          "label": "1"
        },
        {
          "value": "2",
          "label": "2"
        },
      ],
      "default": "1"
    },
    {
      "type": "range",
      "id": "spacing_dk",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Space between icon and content",
      "default": 30
    },
    {
      "type": "range",
      "id": "spacing_tb",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Space between icon and content tablet",
      "default": 20
    },
    {
      "type": "range",
      "id": "spacing_mb",
      "min": 0,
      "max": 50,
      "step": 1,
      "unit": "px",
      "label": "Space between icon and content mobile",
      "default": 15
    },
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "select",
      "id": "color_wrap",
      "label": "Background color wrap",
      "options": [
        {
          "value": "container",
          "label": "Container"
        },
        {
          "value": "fullwidth",
          "label": "Full width"
        }
      ],
      "default": "container"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 52
    },
    {
      "type": "range",
      "id": "padding_rate",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "t:sections.all.padding.padding_rate",
      "default": 75
    }
  ],
  "presets": [
    {
      "name": "Icon box",
      "settings": {
        "carousel_mobile": true,
        "icon_vertical": true
      },
      "blocks": [
        {
          "type": "_icon_block",
          "blocks": [
            {
              "type": "heading",
              "settings": {
                "heading_size": "h6"
              }
            },
            {
              "type": "spacer",
              "settings": {
                "space_lg": 10,
                "space_md": 10,
                "space": 10,
              }
            },
            {
              "type": "text"
            }
          ]
        },
        {
          "type": "_icon_block",
          "blocks": [
            {
              "type": "heading",
              "settings": {
                "heading_size": "h6"
              }
            },
            {
              "type": "spacer",
              "settings": {
                "space_lg": 10,
                "space_md": 10,
                "space": 10,
              }
            },
            {
              "type": "text"
            }
          ]
        },
        {
          "type": "_icon_block",
          "blocks": [
            {
              "type": "heading",
              "settings": {
                "heading_size": "h6"
              }
            },
            {
              "type": "spacer",
              "settings": {
                "space_lg": 10,
                "space_md": 10,
                "space": 10,
              }
            },
            {
              "type": "text"
            }
          ]
        },
      ]
    }
  ]
}
{% endschema %}