{{ 'section-image-gallery.aio.min.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign section_id = '#section-' | append: section.id
  assign slider_id = '#slider-' | append: section.id
  assign enable_slider = section.settings.enable_slider
  assign controls_id = '#controls-' | append: section.id
  assign border_top = section.settings.border_top
  assign items_resp = section.settings.items_resp
  
  assign items_spacing = section.settings.items_spacing
  if items_spacing
    assign items_spacing_slider = '30px'
  else
    assign items_spacing_slider = '0'
  endif

  if items_spacing == false and enable_slider == false
    assign items_spacing_row = 'no-padding'
  endif

  assign heading_style_block = section.blocks | where: 'type' , 'heading-style' | first
  assign block_style = section.blocks | where: 'type' , 'block-style' | first
  assign gallery_blocks = section.blocks | where: 'type', 'block-item'
  assign limit = gallery_blocks.size
-%}

{%- capture section_heading -%}
  {%- render 'snippet-heading', type:'render-html', config: section.settings -%}
{%- endcapture -%}

{%- capture content -%}
  {%- for block in gallery_blocks -%}
    {%- liquid
      assign image = block.settings.image
      assign link = block.settings.link
      assign text_position = block.settings.text_position
      assign text_alignment = block.settings.text_alignment
      assign heading = block.settings.heading
      assign subtext = block.settings.subtext
      assign button = block.settings.button
      assign icon = block.settings.icon
    -%}

    {%- if enable_slider -%}<div class="slider-item">{%- endif -%}
      <div class="image-gallery_item text-position__{{ text_position }}"> 
        <div class="image-gallery_item-inner">
          {%- if link != blank -%}
            <a href="{{ link | default: 'javascript:void(0)' }}" aria-label="Image gallery" class="image">
          {%- else -%}
            <div class="image">
          {%- endif -%}
            {%- render 'image-style', image: image, limit: 992 -%} 
          {%- if link != blank -%}
            </a>
          {%- else -%}
            </div>
          {%- endif -%}

            <div class="textbox text-{{ text_alignment }}">
              {%- if text_position == 'bottom-left-right' -%}<div class="textbox-left">{%- endif -%}
                {%- if heading != blank -%}<span class="image-gallery_title">{{ heading }}</span>{%- endif -%}
                {%- if subtext != blank -%}<span class="image-gallery_subtext">{{ subtext }}</span>{%- endif -%}
              {%- if text_position == 'bottom-left-right' -%}</div>{%- endif -%}

              {%- if text_position == 'bottom-left-right' -%}<div class="textbox-right">{%- endif -%}
                {%- if button != blank or icon -%}
                  <span class="image-gallery_button{% if icon %} check-icon{% endif %}">
                    {%- if icon -%}
                      <span class="image-gallery_button-text">{{ button }}</span>
                      <a href="{{ link | default: 'javascript:void(0)' }}" class="btn btn-1">
                        {%- render 'svg', type: 'angle-right' -%}
                      </a>
                    {%- else -%}
                      <a href="{{ link | default: 'javascript:void(0)' }}" class="btn btn-1">
                        {{ button }}
                      </a>
                    {%- endif -%}
                  </span>
                {%- endif -%}
              {%- if text_position == 'bottom-left-right' -%}</div>{%- endif -%}
            </div>
        </div>
      </div>
    {%- if enable_slider -%}</div>{%- endif -%}
  {%- endfor -%}
{%- endcapture -%}

<div class="section-image-gallery {{ border_top }}" id="section-{{ section.id }}" data-section-id="{{ section.id }}"{% if enable_slider %} data-section-type="featured-collection"{% endif %}>
  <div class="{%- if template == 'index' or template contains 'page' -%}{{ section.settings.section_layout }}{%- endif -%}">

    <div class="section-wrapper {{ items_spacing_row }}">
      {%- if section_heading != blank -%}
        {%- capture heading_css -%}
          {%- render 'snippet-heading', type: 'render-css', config: heading_style_block.settings, classID: section_id -%}
        {%- endcapture -%}
        <div class="section-header">{{ section_heading }}</div>
      {%- endif -%}

      <div class="section-body">
        {%- if gallery_blocks.size > 0 -%}
          {%- if enable_slider -%}
            <slider-component>
              <div class="slider-container js-slider-container">
                <div class="slider-wrapper">
                  <div class="slider-list" id="slider-{{ section.id }}">
                    {{ content }}
                  </div>

                  {%- if enable_slider -%}
                    {%- render 'set-tns-config'
                      slider_id: slider_id,
                      classID: section_id,
                      loop: section.settings.loop,
                      dots: section.settings.dots,
                      controls: section.settings.controls,
                      controls_id: controls_id,
                      customControls: true,
                      autoplay: section.settings.autoplay,
                      autoplay_timeout: section.settings.autoplay_timeout,
                      padding: items_spacing_slider,
                      items_resp: items_resp,
                      total_item: limit
                    -%}
                  {%- endif -%}
                </div>
              </div>
            </slider-component>

          {%- else -%}
            <div class="image-gallery {% render 'grid-class', value: items_resp -%}">
              {{ content }}
            </div>
          {%- endif -%}
        {%- endif -%}
      </div>
    </div>

  </div>
</div>

{%- if enable_slider -%}
  <script>
    window.theme = window.theme || {};
    if(!!window.theme.sectionRegister){
      !window.theme.sectionRegister.includes("featured-collection") && (window.theme.sectionRegister = [...window.theme.sectionRegister, "featured-collection"]);
    }else{
      window.theme.sectionRegister = ["featured-collection"];
    }
  </script>

  <script>
    window.theme = window.theme || {};
    if(!!window.theme.customElementsList){
      !window.theme.customElementsList.includes("slider-component") && (window.theme.customElementsList = [...window.theme.customElementsList, "slider-component"]);
    }else{
      window.theme.customElementsList = ["slider-component"];
    }
  </script>
{%- endif -%}

{%- capture section_css -%}
  {{- heading_css -}}
  {%- if items_spacing -%}
    {%- render 'grid-spacing', preClassID: section_id, classID: ' .d-grid', value: '20px' -%}
  {%- endif -%}
  {%- render 'snippet-theme', type: 'section-style', preClassID: section_id, config: section.settings -%}
  .section-image-gallery#section-{{ section.id }} .image {
    margin: 0 auto;
    border-radius: {{ section.settings.image_corner_radius }}px;
    {%- if section.settings.items_width != blank -%}
      max-width: {{ section.settings.items_width }}px;
    {%- endif -%}
  }
  .section-image-gallery#section-{{ section.id }} .image img {
    border-radius: {{ section.settings.image_corner_radius }}px;
  }

  {%- if block_style != blank -%}
    {%- liquid
      assign title_color = block_style.settings.title_color
      assign title_font_size = block_style.settings.title_font_size
      assign subtext_color = block_style.settings.subtext_color
      assign subtext_font_size = block_style.settings.subtext_font_size
    -%}

    {%- render 'css-responsive', preClassID: section_id, classID: ' .image-gallery_title',
      value_1: title_color, property_1: 'color'
      value_2: title_font_size, property_2: 'font-size'
      -%}
    {%- render 'css-responsive', preClassID: section_id, classID: ' .image-gallery_subtext',
      value_1: subtext_color, property_1: 'color'
      value_2: subtext_font_size, property_2: 'font-size'
      -%}
  {%- endif -%}
{%- endcapture -%}

{%- style -%}{{ section_css | strip | strip_newlines | remove: '  ' }}{%- endstyle -%}

{%- schema -%}
{
  "name": "t:sections.image-gallery.name",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "select",
      "id": "section_layout",
      "label": "t:settings_schema.global.settings.layout_mode.label",
      "default": "container",
      "options": [
        {
          "value": "container",
          "label": "t:settings_schema.global.settings.layout_mode.options__1.label"
        },
        {
          "value": "container-fluid",
          "label": "t:settings_schema.global.settings.layout_mode.options__2.label"
        }
      ]
    },
    {
      "type": "text",
      "id": "margin",
      "label": "t:sections.common.section_margin",
      "info": "t:sections.common.order_info"
    },
    {
      "type": "text",
      "id": "padding",
      "label": "t:sections.common.section_padding",
      "info": "t:sections.common.order_info"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "t:sections.common.background_color"
    },
    {
      "type": "select",
      "id": "border_top",
      "label": "t:sections.common.border_top",
      "default": "border-top-none",
      "options": [
        {
          "value": "border-top",
          "label": "Normal"
        },
        {
          "value": "border-top-fw",
          "label": "Full width"
        },
        {
          "value": "border-top-none",
          "label": "None"
        }
      ]
    },
    {
      "type": "range",
      "id": "image_corner_radius",
      "min": 0,
      "max": 200,
      "step": 2,
      "unit": "px",
      "label": "t:sections.image-gallery.settings.image_corner_radius",
      "default": 0
    }, 
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.common.heading"
    },
    {
      "type": "text",
      "id": "items_resp",
      "label": "t:sections.common.items_per_row",
      "default": "4,2"
    },
    {
      "type": "text",
      "id": "items_width",
      "label": "t:sections.image-gallery.settings.image_width.label",
      "info": "t:sections.image-gallery.settings.image_width.info"
    },
    {
      "type": "checkbox",
      "id": "items_spacing",
      "label": "t:sections.common.items_spacing",
      "default": true
    },
    {
      "type": "header",
      "content": "t:sections.common.slider_settings"
    },
    {
      "type": "checkbox",
      "id": "enable_slider",
      "label": "t:sections.common.enable_slider",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "loop",
      "label": "t:sections.common.loop",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "controls",
      "label": "t:sections.common.controls",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "dots",
      "label": "t:sections.common.dots",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "t:sections.common.autoplay",
      "default": false
    },
    {
      "type": "range",
      "id": "autoplay_timeout",
      "label": "t:sections.common.autoplay_timeout",
      "step": 0.1,
      "min": 2,
      "max": 10,
      "unit": "s",
      "default": 4
    }
  ],
  "blocks": [
    {
      "type": "heading-style",
      "limit": 1,
      "name": "t:sections.common.heading_style",
      "settings": [
        {
          "type": "select",
          "id": "section_heading_container_align",
          "label": "t:sections.common.alignment",
          "options": [
            {
              "value": "start",
              "label": "t:sections.common.left"
            },
            {
              "value": "center",
              "label": "t:sections.common.center"
            },
            {
              "value": "end",
              "label": "t:sections.common.right"
            }
          ]
        },
        {
          "type": "text",
          "id": "section_heading_margin",
          "label": "t:sections.common.margin",
          "info": "t:sections.common.order_info"
        },
        {
          "type": "color",
          "id": "section_heading_color",
          "label": "t:sections.common.text_color"
        },
        {
          "type": "text",
          "id": "section_heading_font_size",
          "label": "t:sections.common.font_size",
          "info": "t:sections.common.unit_px"
        },
        {
          "type": "range",
          "id": "section_heading_font_weight",
          "label": "t:sections.common.font_weight",
          "step": 100,
          "min": 100,
          "max": 900,
          "default": 600
        }
      ]
    },
    {
      "type": "block-item",
      "name": "t:sections.common.block_item",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.common.image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.common.link"
        },
        {
          "type": "header",
          "content": "t:sections.common.textbox"
        },
        {
          "type": "select",
          "id": "text_position",
          "label": "t:sections.common.position",
          "options": [
            {
              "value": "top-left",
              "label": "t:sections.slideshow.blocks.slide.box_align.options__1.label"
            },
            {
              "value": "top-center",
              "label": "t:sections.slideshow.blocks.slide.box_align.options__2.label"
            },
            {
              "value": "top-right",
              "label": "t:sections.slideshow.blocks.slide.box_align.options__3.label"
            },
            {
              "value": "middle-left",
              "label": "t:sections.slideshow.blocks.slide.box_align.options__4.label"
            },
            {
              "value": "middle-center",
              "label": "t:sections.slideshow.blocks.slide.box_align.options__5.label"
            },
            {
              "value": "middle-right",
              "label": "t:sections.slideshow.blocks.slide.box_align.options__6.label"
            },
            {
              "value": "bottom-left",
              "label": "t:sections.slideshow.blocks.slide.box_align.options__7.label"
            },
            {
              "value": "bottom-center",
              "label": "t:sections.slideshow.blocks.slide.box_align.options__8.label"
            },
            {
              "value": "bottom-right",
              "label": "t:sections.slideshow.blocks.slide.box_align.options__9.label"
            },
            {
              "value": "bottom-left-right",
              "label": "t:sections.image-gallery.settings.bottom_left_right"
            },
            {
              "value": "below-image",
              "label": "t:sections.image-gallery.settings.below_image"
            }
          ],
          "default": "middle-center"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "label": "t:sections.common.alignment",
          "default": "center",
          "options": [
            {
              "value": "start",
              "label": "t:sections.common.left",
            },
            {
              "value": "center",
              "label": "t:sections.common.center",
            },
            {
              "value": "end",
              "label": "t:sections.common.right"
            }
          ]
        },
        {
          "type": "richtext",
          "id": "heading",
          "label": "t:sections.common.heading"
        },
        {
          "type": "richtext",
          "id": "subtext",
          "label": "t:sections.common.subtext"
        },
        {
          "type": "html",
          "id": "button",
          "label": "t:sections.common.button_label"
        },
        {
          "type": "checkbox",
          "id": "icon",
          "label": "t:sections.common.svg"
        }
      ]
    },
    {
      "type": "block-style",
      "limit": 1,
      "name": "t:sections.image-gallery.blocks.block_style.name",
      "settings": [
        {
          "type": "header",
          "content": "t:sections.image-gallery.blocks.block_style.settings.header_1.content"
        },
        {
          "type": "color",
          "id": "title_color",
          "label": "t:sections.common.text_color"
        },
        {
          "type": "text",
          "id": "title_font_size",
          "label": "t:sections.common.font_size"
        },
        {
          "type": "header",
          "content": "t:sections.image-gallery.blocks.block_style.settings.header_2.content"
        },
        {
          "type": "color",
          "id": "subtext_color",
          "label": "t:sections.common.text_color"
        },
        {
          "type": "text",
          "id": "subtext_font_size",
          "label": "t:sections.common.font_size"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.image-gallery.name",
      "blocks": [
        {
          "type": "block-item"
        },
        {
          "type": "block-item"
        },
        {
          "type": "block-item"
        },
        {
          "type": "block-item"
        }
      ]
    }
  ]
}
{%- endschema -%}