{{ 'component-image-with-text.css' | asset_url | stylesheet_tag }}
{{ 'promo-image-with-text.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign fetch_priority = 'auto'
  if section.index == 1
    assign fetch_priority = 'high'
  endif
-%}


<div class="image-with-text image-with-text--full-width {% unless section.settings.full_page_content %}page-width{% endunless %}">
  <div class="image-with-text__grid grid grid--gapless grid--1-col grid--2-col-tablet {% if section.settings.layout == 'text_first' %} image-with-text__grid--reverse{% endif %}">
    <div class="image-with-text__media-item image-with-text__media-item--{{ section.settings.desktop_image_width }} image-with-text__media-item--{{ section.settings.desktop_content_position }} grid__item">
    <div
      class="image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings{% if section.settings.image != blank %} media{% else %} image-with-text__media--placeholder placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}"
    >
        {%- if section.settings.image != blank -%}
          {%- if section.settings.image_behavior == 'ambient' or section.settings.image_behavior == 'zoom-in' -%}
            {%- assign widths = '198, 432, 642, 900, 1284, 1800' -%}
            {%- capture sizes -%}
              (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1.6667 }}px,
              (min-width: 750px) calc((100vw - 130px) / 1.667), calc((100vw - 50px) / 1.667)
            {%- endcapture -%}
          {%- else -%}
            {%- assign widths = '165, 360, 535, 750, 1070, 1500' -%}
            {%- capture sizes -%}
              (min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px,
              (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)
            {%- endcapture -%}
          {%- endif -%}

          {% assign classes = 'desktop-image' %}
          {% if section.settings.image_mbl %}
            {% assign classes = 'desktop-image small-hide' %}
          {% endif %}

          {{
            section.settings.image
            | image_url: width: 1500
            | image_tag: sizes: sizes, widths: widths, fetchpriority: fetch_priority, class: classes
          }}

          {% if section.settings.image_mbl != blank %}
            {% assign classes = 'mobile-image medium-hide large-up-hide' %}
            {{
              section.settings.image_mbl
              | image_url: width: 3840
              | image_tag: sizes: sizes, widths: widths, fetchpriority: fetch_priority, class: classes
            }}
          {% endif %}
        {%- else -%}
          {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
        {%- endif -%}
      </div>
    </div>
    <div class="grid__item content" style="background: url({{ section.settings.text_background |  image_url }})">
      <div class="image-with-text__content image-with-text__content--desktop-{{ section.settings.desktop_content_alignment }} image-with-text__content--mobile-{{ section.settings.mobile_content_alignment }} image-with-text__content--{{ section.settings.height }}">
        {%- for block in section.blocks -%}
          {% case block.type %}
            {%- when 'image' -%}
                {% if block.settings.svg_code != blank %}
                  {{ block.settings.svg_code }}
                {% elsif block.settings.content_imag != blank %}
                  {{ block.settings.content_image | image_url: width: block.settings.content_image.width | image_tag  }}
                {% endif %}
            {%- when 'heading' -%}
              <h2 class="image-with-text__heading h1" {{ block.shopify_attributes }}>
                {{ block.settings.heading | escape }}
              </h2>
            {%- when 'text' -%}
              <div class="image-with-text__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }} style="color: {{ block.settings.textcolor }}; background-color: {{ block.settings.bgcolor }};">{{ block.settings.text }}</div>
            {%- when 'button' -%}       
              {%- if block.settings.button_label != blank -%}
                  <a{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                    {{ block.settings.button_label | escape }}
                  </a>
              {%- endif -%}
          {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
</div>

{%style%}
  {% if section.settings.height == 'adapt' and section.settings.image != blank %}
    @media screen and (min-width: 750px) {
      #shopify-section-{{section.id}} .image-with-text__media {
        padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
      }
    }

    @media screen and (max-width: 749px) {
      #shopify-section-{{section.id}} .image-with-text__media {
        padding-bottom: {{ 1 | divided_by: section.settings.image_mbl.aspect_ratio | times: 100 }}%;
      }
    }
  {% endif %}

  #shopify-section-{{section.id}} {background-color: {{section.settings.bgcolor}};}
  #shopify-section-{{section.id}} .image-with-text__text, #shopify-section-{{section.id}} .image-with-text__heading {color: {{section.settings.textcolor}} ;}

  #shopify-section-{{section.id}} {
    background-color:{{section.settings.bgcolor}};
    margin-top:{{section.settings.margin-top}}px;
    margin-bottom:{{section.settings.margin-bottom}}px;
    padding-top:{{section.settings.padding-top}}px;
    padding-bottom:{{section.settings.padding-bottom}}px;
  }

  #shopify-section-{{section.id}} .banner__content {
    gap: {{section.settings.gridspace}}px;
  }

  @media screen and (max-width: 749px) {
    #shopify-section-{{section.id}} {
      margin-top:{{section.settings.margin-top-mobile}}px;
      margin-bottom:{{section.settings.margin-bottom-mobile}}px;
      padding-top:{{section.settings.padding-top-mobile}}px;
      padding-bottom:{{section.settings.padding-bottom-mobile}}px;
    }      
  }

  @media screen and (min-width: 749px) {  
    #shopify-section-{{section.id}} .banner__box  {
      max-width: {{section.settings.content-width}}rem;
    }
  }

{% if section.settings.width == "onethird" %}
  @media screen and (min-width: 750px) {
    #shopify-section-{{section.id}} .grid__item.media{    width: calc(66% - 0.5rem);}
    #shopify-section-{{section.id}} .grid__item.content{    width: calc(33% - 0.5rem);}
  }
{% elsif section.settings.width == "quarter" %}
  @media screen and (min-width: 750px) {
    #shopify-section-{{section.id}} .grid__item.media{    width: calc(75% - 0.5rem);}
    #shopify-section-{{section.id}} .grid__item.content{    width: calc(25% - 0.5rem);}

    #shopify-section-{{section.id}} .image-with-text__content {
      padding: 3rem 3rem 3rem;
    }
  }
{%endif%}
{%endstyle%}

{% schema %}
{
  "name": "Promo image with text",
  "class": "spaced-section--full-width promo-image-with-text",
  "tag": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "full_page_content",
      "label": "Make this content full width?",
	    "default": false
    },
    {
      "type": "color",
      "id": "bgcolor",
      "default": "#ffffff",
      "label": "t:sections.text-banner.settings.bgcolor.label",
      "info": "t:sections.text-banner.settings.bgcolor.info"
    },
    {
      "type": "color",
      "id": "textcolor",
      "default": "#000000",
      "label": "t:sections.text-banner.settings.textcolor.label",
      "info": "t:sections.text-banner.settings.textcolor.info"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-with-text.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_mbl",
      "label": "Mobile image"
    },
    {
      "type": "image_picker",
      "id": "text_background",
      "label": "Text area background"
    },
    {
      "type": "select",
      "id": "height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.image-with-text.settings.height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.image-with-text.settings.height.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-with-text.settings.height.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.image-with-text.settings.height.label"
    },
    {
      "type": "select",
      "id": "width",
      "options": [
        {
          "value": "half",
          "label": "t:sections.image-with-text.settings.width.options__1.label"
        },
        {
          "value": "onethird",
          "label": "t:sections.image-with-text.settings.width.options__2.label"
        },
        {
          "value": "quarter",
          "label": "t:sections.image-with-text.settings.width.options__3.label"
        }
      ],
      "default": "half",
      "label": "t:sections.image-with-text.settings.width.label"
    },
    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image_first",
          "label": "t:sections.image-with-text.settings.layout.options__1.label"
        },
        {
          "value": "text_first",
          "label": "t:sections.image-with-text.settings.layout.options__2.label"
        }
      ],
      "default": "image_first",
      "label": "t:sections.image-with-text.settings.layout.label",
      "info": "t:sections.image-with-text.settings.layout.info"
    },
    {
      "type": "header",
      "content": "t:sections.image-with-text.settings.header.content"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-with-text.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "left",
      "label": "t:sections.image-with-text.settings.desktop_content_alignment.label"
    },
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-with-text.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "left",
      "label": "t:sections.image-with-text.settings.mobile_content_alignment.label"
    },
    {
    "type": "header",
    "content": "Desktop"
    },

    {
    "type": "range",
    "id": "margin-top",
    "min": -100,
    "max": 100,
    "step": 5,
    "unit": "px",
    "label": "Margin-top",
    "default": 0
    },
    {
    "type": "range",
    "id": "margin-bottom",
    "min": -100,
    "max": 100,
    "step": 5,
    "unit": "px",
    "label": "Margin-bottom",
    "default": 0
    },
    {
    "type": "range",
    "id": "padding-top",
    "min": 0,
    "max": 100,
    "step": 5,
    "unit": "px",
    "label": "Padding-top",
    "default": 0
    },
    {
    "type": "range",
    "id": "padding-bottom",
    "min": 0,
    "max": 100,
    "step": 5,
    "unit": "px",
    "label": "Padding-bottom",
    "default": 0
    },
    {
    "type": "header",
    "content": "Mobile"
    },
    {
    "type": "range",
    "id": "margin-top-mobile",
    "min": -100,
    "max": 100,
    "step": 5,
    "unit": "px",
    "label": "Margin-top",
    "default": 0
    },
    {
    "type": "range",
    "id": "margin-bottom-mobile",
    "min": -100,
    "max": 100,
    "step": 5,
    "unit": "px",
    "label": "Margin-bottom",
    "default": 0
    },
    {
    "type": "range",
    "id": "padding-top-mobile",
    "min": 0,
    "max": 100,
    "step": 5,
    "unit": "px",
    "label": "Padding-top",
    "default": 0
    },
    {
    "type": "range",
    "id": "padding-bottom-mobile",
    "min": 0,
    "max": 100,
    "step": 5,
    "unit": "px",
    "label": "Padding-bottom",
    "default": 0
    }


    
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Image with text",
          "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "image",
      "name": "Content Image",
      "limit": 1,
      "settings": [
        {
          "type": "html",
          "id": "svg_code",
          "label": "SVG code"
        },
        {
          "type": "header",
          "content": "Or"
        },
        {
          "type": "image_picker",
          "id": "content_image",
          "label": "Content Image"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-with-text.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.image-with-text.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.email-signup-banner.blocks.paragraph.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.email-signup-banner.blocks.paragraph.settings.text_style.options__2.label"
            }
          ],
          "default": "body",
          "label": "t:sections.email-signup-banner.blocks.paragraph.settings.text_style.label"
        },
        {
          "type": "color",
          "id": "bgcolor",
          "label": "t:sections.text-banner.settings.bgcolor.label",
        },
        {
          "type": "color",
          "id": "textcolor",
          "label": "t:sections.text-banner.settings.textcolor.label",
        }
      ]
    },
    {
      "type": "button",
      "name": "t:sections.image-with-text.blocks.button.name",
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
          "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "default": false,
          "label": "Secondary Button"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Promo image with text",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}