

<div
  class='marquee-v1'
  style='
    {%- if section.settings.show_border_top -%}
      border-top: 1px solid rgba(var(--color-foreground));
      {% else %}
        border-top: 0;
    {% endif %}
    {%- if section.settings.show_border_bottom -%}
      border-bottom: 1px solid rgba(var(--color-foreground));
      {% else %}
        border-top: 0;
    {% endif %}
  '
>
  <section {% render 'section-attr' %}>
    <xo-marquee
      class='xo-brands-marquee'
      style='
        {%- if section.settings.item_space -%}
          --space: {{ section.settings.item_space }}rem;
        {%- endif -%}
      '
      xo-speed='{{ section.settings.marquee_speed }}'
      {%- if section.settings.stop_marquee -%}
        xo-pause-on-hover='true'
      {%- endif -%}
      {%- if section.settings.marquee_right_to_left -%}
        xo-rtl='true'
      {%- endif -%}
    >
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'image' %}
            <a class='xo-brands-marquee__image' href='{{ block.settings.item_link | default: '#' }}' style='width: {{block.settings.width_image}}rem;'>
              {% render 'image', image: block.settings.item_image %}
            </a>
          {% when 'text' %}
            <a
              class='xo-brands-marquee__text'
              {%- if block.settings.color_text -%}
                style='--text-color: {{ block.settings.color_text | default: '#000' }}'
              {%- endif -%}
              href='{{ block.settings.item_link | default: '#' }}'
            >
              {{- block.settings.item_text -}}
            </a>
        {% endcase %}
      {% endfor %}
    </xo-marquee>
  </section>
</div>

{% schema %}
{
  "name": "t:sections.marquee_v1.name",
  "settings": [
    {
      "type": "checkbox",
      "id": "show_border_top",
      "default": false,
      "label": "t:sections.marquee_v1.settings.show_border_top"
    },
    {
      "type": "checkbox",
      "id": "show_border_bottom",
      "default": true,
      "label": "t:sections.marquee_v1.settings.show_border_bottom"
    },
    {
      "type": "range",
      "id": "item_space",
      "min": 1,
      "max": 10,
      "step": 0.5,
      "unit": "rem",
      "label": "t:sections.marquee_v1.settings.space",
      "default": 4
    },
    {
      "type": "range",
      "id": "marquee_speed",
      "min": 1,
      "max": 10,
      "step": 1,
      "label": "t:sections.marquee_v1.settings.speed",
      "default": 4
    },
    {
      "type": "checkbox",
      "id": "stop_marquee",
      "label": "t:sections.marquee_v1.settings.marquee_stop",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "marquee_right_to_left",
      "label": "t:sections.marquee_v1.settings.marquee_right_to_left",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "select",
      "id": "background_type",
      "label": "t:sections.all.background_type.label",
      "options": [
        {
          "value": "color",
          "label": "t:sections.all.background_type.option__1.label"
        },
        {
          "value": "gradient",
          "label": "t:sections.all.background_type.option__2.label"
        },
        {
          "value": "image",
          "label": "t:sections.all.background_type.option__3.label"
        },
        {
          "value": "video",
          "label": "t:sections.all.background_type.option__4.label"
        }
      ],
      "default": "color"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.background_color.label",
      "alpha": true,
      "visible_if": "{{ section.settings.background_type == 'color' }}"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.background_gradient.label",
      "visible_if": "{{ section.settings.background_type == 'gradient' }}"
    },
    {
      "type": "number",
      "id": "background_margin",
      "label": "t:sections.all.background_margin.label",
      "default": 0
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "t:sections.marquee_v1.blocks.marquee_image_item.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "item_image",
          "label": "t:sections.marquee_v1.blocks.marquee_image_item.label",
          "info": "t:sections.marquee_v1.blocks.marquee_image_item.info"
        },
        {
          "type": "url",
          "id": "item_link",
          "label": "t:sections.marquee_v1.blocks.marquee_image_item.link"
        },
        {
          "type": "range",
          "id": "width_image",
          "min": 1,
          "max": 30,
          "step": 0.5,
          "unit": "rem",
          "label": "t:sections.marquee_v1.blocks.marquee_image_item.width",
          "default": 15
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.marquee_v1.blocks.marquee_text_item.name",
      "settings": [
        {
          "type": "text",
          "id": "item_text",
          "label": "t:sections.marquee_v1.blocks.marquee_text_item.label",
          "default": "MARQUEE TEXT"
        },
        {
          "type": "url",
          "id": "item_link",
          "label": "t:sections.marquee_v1.blocks.marquee_text_item.link",
          "default": "/collections/all"
        },
        {
          "type": "color",
          "id": "color_text",
          "label": "t:sections.marquee_v1.blocks.marquee_text_item.color"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "MARQUEE V1",
      "blocks": {
        "text_GfGEmi": {
          "type": "text",
          "settings": {
            "item_text": "LIMITED OFFER",
            "item_link": "shopify://collections",
            "color_text": "#ffffff"
          }
        },
        "text_LM7QAP": {
          "type": "text",
          "settings": {
            "item_text": "EXCLUSIVE NECKTIE SALE",
            "item_link": "shopify://collections",
            "color_text": "#ffffff"
          }
        },
        "text_9BP3UK": {
          "type": "text",
          "settings": {
            "item_text": "LIMITED OFFER",
            "item_link": "shopify://collections/product-card-style-03",
            "color_text": "#ffffff"
          }
        },
        "text_4BUTWk": {
          "type": "text",
          "settings": {
            "item_text": "EXCLUSIVE NECKTIE SALE",
            "item_link": "shopify://collections/drawer-sidebar",
            "color_text": "#ffffff"
          }
        },
        "text_xANYYG": {
          "type": "text",
          "settings": {
            "item_text": "LIMITED OFFER",
            "item_link": "shopify://collections/product-card-style-06",
            "color_text": "#ffffff"
          }
        }
      },
      "block_order": [
        "text_GfGEmi",
        "text_LM7QAP",
        "text_9BP3UK",
        "text_4BUTWk",
        "text_xANYYG"
      ],
      "settings": {
        "show_border_top": false,
        "show_border_bottom": false,
        "item_space": 4,
        "marquee_speed": 2,
        "stop_marquee": true,
        "marquee_right_to_left": false,
        "color_scheme": "inverse",
        "background_type": "color",
        "background_color": "#080808",
        "background_gradient": "",
        "background_margin": 0,
        "padding_top": 2,
        "padding_bottom": 2
      }
    }
  ]
}
{% endschema %}
