{{ 'section-logo-list.aio.min.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign section_id = '#section-' | append: section.id
  assign slider_id = '#slider-' | append: section.id
  assign controls_id = '#controls-' | append: section.id
  assign items_resp = section.settings.items_resp

  if section.settings.items_spacing
    assign items_spacing_slider = '30px'
  else
    assign items_spacing_slider = '0'
  endif

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

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

<div class="section-logo-list" id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="logo-list">
  <div class="{{ section.settings.section_layout }}">
    <div class="section-wrapper{% unless section.settings.border %} remove-border-section{% endunless %}">
      {%- 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 -%}

      {%- if gallery_blocks.size > 0 -%}
        <div class="section-body align-items-center">
          <slider-component>
            <div class="slider-container position-relative js-slider-container">
              <div class="slider-wrapper">
                <div class="slider-list" id="slider-{{ section.id }}">
                  {%- for block in gallery_blocks -%}
                    {%- liquid
                      assign type = block.settings.type
                      assign image = block.settings.image
                      assign svg = block.settings.svg
                      assign link = block.settings.link
                    -%}

                    <div class="slider-item logo-item">
                      {%- capture image -%}
                        {%- if type == 'image' -%}
                          {%- render 'image-style', image: image, limit: 200 -%}
                        {%- else -%}
                          {{ svg }}
                        {%- endif -%}
                      {%- endcapture -%}

                      <div class="logo-item_inner">
                        {%- if link != blank -%}
                          <a href="{{ link | default: 'javascript:void(0)' }}" aria-label="Logo image">{{ image }}</a>
                        {%- else -%}
                          {{ image }}
                        {%- endif -%}
                      </div>
                    </div>
                  {%- endfor -%}
                </div>

                {%- render 'set-tns-config'
                  slider_id: slider_id,
                  classID : section_id,
                  loop: section.settings.loop,
                  dots: section.settings.dots,
                  controls: section.settings.controls,
                  nav: 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: gallery_blocks.size
                -%}
              </div>
            </div>
          </slider-component>
        </div>
      {%- endif -%}
    </div>
  </div>
</div>

<script>
  window.theme = window.theme || {};
  if(!!window.theme.sectionRegister){
    !window.theme.sectionRegister.includes("logo-list") && (window.theme.sectionRegister = [...window.theme.sectionRegister, "logo-list"]);
  }else{
    window.theme.sectionRegister = ["logo-list"];
  }
</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>

{%- capture section_css -%}
  {{- heading_css -}}
  {%- render 'snippet-theme', type: 'section-style', preClassID: section_id, config: section.settings -%}
{%- endcapture -%}

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

{%- schema -%}
{
  "name": "t:sections.logo-list.name",
  "tag": "section",
  "disabled_on": {
    "groups": ["header"]
  },
  "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": "text",
      "id": "items_resp",
      "label": "t:sections.common.items_per_row",
      "default": "6,5,4,3"
    },
    {
      "type": "checkbox",
      "id": "items_spacing",
      "label": "t:sections.common.items_spacing",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "border",
      "label": "t:sections.common.border",
      "default": true
    },
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.common.heading",
      "default": "Brands We Trust"
    },
    {
      "type": "header",
      "content": "t:sections.common.slider_settings"
    },
    {
      "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": false
    },
    {
      "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": "select",
          "id": "type",
          "label": "t:sections.common.type",
          "options": [
            {
              "value": "image",
              "label": "t:sections.common.image"
            },
            {
              "value": "svg",
              "label": "t:sections.common.svg"
            }
          ]
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.common.image"
        },
        {
          "type": "html",
          "id": "svg",
          "label": "t:sections.common.svg"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.common.link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.logo-list.name",
      "blocks": [
        {
          "type": "block-item"
        },
        {
          "type": "block-item"
        },
        {
          "type": "block-item"
        },
        {
          "type": "block-item"
        },
        {
          "type": "block-item"
        },
        {
          "type": "block-item"
        }
      ]
    }
  ]
}
{%- endschema -%}