{{ 'section-search-box-banner.aio.min.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign bg_image = section.settings.bg_image
  assign section_id = '#section-' | append: section.id
  assign items_resp = '2'
  assign heading_style_block = section.blocks | where: 'type' , 'heading-style' | first
  assign gallery_blocks = section.blocks | where: 'type', 'block-item'
-%}

{%- capture bg_wide -%}{%- render 'bg_responsive', image_desk: bg_image, image_mobi: bg_image -%}{%- endcapture -%}

{%- capture section_heading -%}
  {%- if section.settings.heading != blank -%}
    <div class="section-heading">
      <h2 class="heading">{{ section.settings.heading }}</h2>
    </div>  
  {%- endif -%}
{%- endcapture -%}

{%- capture grid_class -%}{%- render 'set-item-per-row', value: items_resp -%}{%- endcapture -%}

<div class="section-search-box-banner" id="section-{{ section.id }}" data-section-id="{{ section.id }}">
  <div class="section-wrapper">

    <div class="section-body {{ bg_wide }}">
      <div class="section-body-inner row">
        {%- if section.settings.search_box -%}
          <div class="search-box-section col-lg-8 col-12">
            {%- capture search_heading_css -%}
              {%- render 'snippet-heading', type: 'render-search-css', config: heading_style_block.settings, classID: section_id -%}
            {%- endcapture -%}

            {%- if section.settings.search_box_heading != blank -%}
              <div class="search-box-heading">{{ section.settings.search_box_heading }}</div>
            {%- endif -%}
            {%- if section.settings.search_box_subtext != blank -%}
              <div class="search-box-subtext">{{ section.settings.search_box_subtext }}</div>
            {%- endif -%}

            <form action="{{ routes.search_url }}" class="search-form" methos="get">
              <input type="hidden" value="{{ settings.search_type }}" name="type">
              <input type="hidden" value="{{ settings.search_unavailable_products }}" name="options[unavailable_products]">
              <input type="hidden" value="last" name="options[prefix]">

              <input type="text" name="q" placeholder="{{ 'sections.header.search_placeholder' | t }}" autocomplete="off">
              <button type="submit" class="btn btn-1" aria-label="Search">
                {%- render 'svg', type: 'search' -%}
              </button>
            </form>
          </div>
        {%- endif -%}

        {%- if section.settings.block_product -%}
          <div class="block-slider-component col-lg-4 col-12">
            {%- 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="slider-container">
              <div class="slider-wrapper">
                <div class="slider-list row" id="slider-{{ section.id }}">
                  {%- for i in (1..2) -%}
                    {%- assign m_handle = 'product_' | append: i -%}
                    {%- assign product = all_products[section.settings[m_handle]] -%}
                    <div class="slider-item {{ grid_class }}">
                      {%- render 'product-item', product: product -%}
                    </div>
                  {%- endfor -%}
                </div>
              </div>
            </div>
          </div>
        {%- endif -%}
      </div>

      {%- if gallery_blocks.size > 0 -%}
        <div class="gallery-blocks">
          {%- for block in gallery_blocks -%}
            <div class="image-gallery_item{% if block.settings.double_size %} double-size{% endif %}">
              <a href="{{ block.settings.link | default: 'javascript:void(0)' }}" aria-label="Image">
                {%- render 'image-style', image: block.settings.image, limit: 992 -%} 
              </a>
            </div>
          {%- endfor -%}
        </div>
      {%- endif -%}
    </div>

  </div>
</div>

{%- capture section_css -%}
  {{- search_heading_css -}}
  {{- heading_css -}}
  {%- render 'snippet-theme', type: 'section-style', preClassID: section_id, config: section.settings -%}
  .section-search-box-banner .section-body-inner, .section-search-box-banner .gallery-blocks {
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
  }
{%- endcapture -%}

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

{%- schema -%}
{
  "name": "t:sections.search-box-with-banner.name",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "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": "image_picker",
      "id": "bg_image",
      "label": "t:sections.common.background_image"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "t:sections.common.background_color"
    },
    {
      "type": "header",
      "content": "t:sections.search-box-with-banner.settings.search_box"
    },
    {
      "type": "checkbox",
      "id": "search_box",
      "label": "t:sections.common.enable_widget",
      "default": true
    },
    {
      "type": "richtext",
      "id": "search_box_heading",
      "label": "t:sections.common.heading"
    },
    {
      "type": "richtext",
      "id": "search_box_subtext",
      "label": "t:sections.common.subtext"
    },
    {
      "type": "header",
      "content": "t:sections.common.block_product"
    },
    {
      "type": "checkbox",
      "id": "block_product",
      "label": "t:sections.common.enable_widget",
      "default": true
    },
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.common.heading",
      "default": "Featured products"
    },
    {
      "type": "product",
      "id": "product_1",
      "label": "t:sections.common.product"
    },
    {
      "type": "product",
      "id": "product_2",
      "label": "t:sections.common.product"
    }
  ],
  "blocks": [
    {
      "type": "heading-style",
      "limit": 1,
      "name": "t:sections.common.heading_style",
      "settings": [
        {
          "type": "header",
          "content": "t:sections.common.block_product"
        },
        {
          "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": "header",
          "content": "t:sections.search-box-with-banner.settings.search_box"
        },
        {
          "type": "color",
          "id": "search_section_heading_color",
          "label": "t:sections.common.text_color"
        },
        {
          "type": "text",
          "id": "search_section_heading_font_size",
          "label": "t:sections.search-box-with-banner.settings.heading_size",
          "info": "t:sections.common.unit_px"
        },
        {
          "type": "text",
          "id": "search_section_subtext_font_size",
          "label": "t:sections.search-box-with-banner.settings.subtext_size",
          "info": "t:sections.common.unit_px"
        }
      ]
    },
    {
      "type": "block-item",
      "name": "t:sections.common.block_item",
      "settings": [
        {
          "type": "checkbox",
          "id": "double_size",
          "label": "t:sections.search-box-with-banner.settings.double_size"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.common.image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.common.link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.search-box-with-banner.name",
      "blocks": [
        {
          "type": "block-item"
        },
        {
          "type": "block-item"
        },
        {
          "type": "block-item"
        },
        {
          "type": "block-item"
        }
      ]
    }
  ]
}
{%- endschema -%}