{{ 'section-search.css' | asset_url | stylesheet_tag }}

<xo-modal
  class='search'
  xo-name='search'
  xo-scroll-disabled
  xo-animate='slide-down'
  xo-placement='top-left'
  xo-autofocus
>
  {%- liquid
    assign sort_by = search.sort_by | default: search.default_sort_by
    assign search_url = '?q=' | append: terms | append: '&options%5Bprefix%5D=last&sort_by=' | append: sort_by
  -%}
  {% capture content %}
    <xo-container>
      <form action='{{ routes.search_url }}' method='get' role='search' class='search'>
        {% liquid
          assign value = search.terms | escape
          if search.performed
            assign label = 'templates.search.title' | t
          else
            assign label = 'general.search.search' | t
          endif
          %}
      {% render 'predictive-search', logo: section.settings.logo_img, logo_width: section.settings.logo_width, label: label, value: value %}
    </form>
    </xo-container>
  {% endcapture %}
  {% render 'modal-content', full_width: true, content: content, scroll_disabled: true %}
</xo-modal>

{% schema %}
{
  "name": "t:sections.search.name",
  "class": "section-predictive-search",
  "settings": [
    {
      "type": "image_picker",
      "id": "logo_img",
      "label": "t:sections.search.settings.logo_img.label"
    },
    {
      "type": "range",
      "id": "logo_width",
      "min": 50,
      "max": 250,
      "step": 10,
      "default": 100,
      "unit": "t:sections.search.settings.logo_width.unit",
      "label": "t:sections.search.settings.logo_width.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.search.settings.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.search.settings.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.search.settings.bg_gradient.label"
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.search.settings.padding_top.label"
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.search.settings.padding_bottom.label"
    }
  ]
}
{% endschema %}
