{{ 'section-image-comparison-v1.css' | asset_url | stylesheet_tag }}
<section {% render 'section-attr' %}>
  <div class='image-comparison-v1'>
    <xo-container {% render 'section-layout' %}>
      <xo-grid style='--xs: 1; --sm: 1; --xl: 2'>
        <div class='image-comparison-v1__content'>
          {%- if section.settings.subtitle != blank -%}
            <div class='image-comparison-v1__sub'>
              {{ section.settings.subtitle }}
            </div>
          {%- endif -%}
          {%- if section.settings.title != blank -%}
            <div class='image-comparison-v1__title'>
              {{ section.settings.title }}
            </div>
          {%- endif -%}
          {%- if section.settings.desc != blank -%}
            <div class='image-comparison-v1__desc'>
              {{ section.settings.desc }}
            </div>
          {%- endif -%}
          <div class='image-comparison-v1__button'>
            {% render 'button', link: {{section.settings.button_link}}, text: section.settings.text_button, style: 'primary', size: 'sm', %}
          </div>
        </div>
        <div class='image-comparison-v1__image'>
          <xo-image-comparison>
            <xo-image-comparison-before>
              {%- render 'image', image: section.settings.image_before -%}
              <xo-image-comparison-label class='image-comparison-v1__before-text'>Before</xo-image-comparison-label>
            </xo-image-comparison-before>

            <xo-image-comparison-after>
              {%- render 'image', image: section.settings.image_after -%}
              <xo-image-comparison-label class='image-comparison-v1__after-text'>After</xo-image-comparison-label>
            </xo-image-comparison-after>

            <xo-image-comparison-handle>
              <xo-image-comparison-handle-icon class='image-comparison-v1__icon'>
                <span>
                  <svg width='40' height='20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' fill='none' viewBox='0 0 11 16'>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.5C0 0.223858 0.223858 0 0.5 0C0.776142 0 1 0.223858 1 0.5V15.5C1 15.7761 0.776142 16 0.5 16C0.223858 16 0 15.7761 0 15.5V0.5ZM5 0.5C5 0.223858 5.22386 0 5.5 0C5.77614 0 6 0.223858 6 0.5V15.5C6 15.7761 5.77614 16 5.5 16C5.22386 16 5 15.7761 5 15.5V0.5ZM11 0.5C11 0.223858 10.7761 0 10.5 0C10.2239 0 10 0.223858 10 0.5V15.5C10 15.7761 10.2239 16 10.5 16C10.7761 16 11 15.7761 11 15.5V0.5Z" fill="currentColor"></path>
                  </svg>
                </span>
              </xo-image-comparison-handle-icon>
            </xo-image-comparison-handle>
          </xo-image-comparison>
        </div>
      </xo-grid>
    </xo-container>
  </div>
</section>

{% schema %}
{
  "name": "t:sections.image_comparison_v1.name",
  "settings": [
    {
      "type": "select",
      "id": "width",
      "label": "t:sections.all.width.label",
      "default": "box",
      "options": [
        {
          "value": "box",
          "label": "t:sections.all.width.options__1.label"
        },
        {
          "value": "wide",
          "label": "t:sections.all.width.options__2.label"
        },
        {
          "value": "fullwidth",
          "label": "t:sections.all.width.options__3.label"
        }
      ]
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "t:sections.image_comparison_v1.settings.subtitle.label",
      "default": "Subtitle",
      "info": "Enter <br> for a line break"
    },
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.image_comparison_v1.settings.title.label",
      "default": "Title"
    },
    {
      "type": "richtext",
      "id": "desc",
      "label": "t:sections.image_comparison_v1.settings.desc.label",
      "default": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum itaque expedita doloribus dolorem. Voluptate, explicabo.</p>"
    },
    {
      "type": "text",
      "id": "text_button",
      "label": "t:sections.image_comparison_v1.settings.text_button.label",
      "default": "Text"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.image_comparison_v1.settings.button_link.label",
      "default": "/collections/all"
    },
    {
      "type": "image_picker",
      "id": "image_before",
      "label": "t:sections.image_comparison_v1.settings.image_before.label"
    },
    {
      "type": "image_picker",
      "id": "image_after",
      "label": "t:sections.image_comparison_v1.settings.image_after.label"
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.bg_gradient.label"
    },
    {
      "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": [

  ],
  "presets": [
    {
      "name": "t:sections.image_comparison_v1.presets.name"
    }
  ]
}
{% endschema %}
