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

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

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

<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.section_color_scheme }}">
  <div class="page-width">
    <div class="image-with-text isolate{% if settings.text_boxes_border_thickness > 0 and settings.text_boxes_border_opacity > 0 and settings.media_border_thickness > 0 and settings.media_border_opacity > 0 %} collapse-borders{% endif %}{% unless section.settings.color_scheme == section.settings.section_color_scheme and settings.media_border_thickness > 0 and settings.text_boxes_shadow_opacity == 0 and settings.text_boxes_border_thickness == 0 or settings.text_boxes_border_opacity == 0 %} collapse-corners{% endunless %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
      <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 %} gradient color-{{ section.settings.color_scheme }}">
        <div class="image-with-text__media-item grid__item">
          <div class="images-metrix grid grid--2-col grid--3-col-desktop">
            {% assign section_collection = section.settings.collection %}
            {% for product in section_collection.products limit: 9 %}
              {% liquid
                assign ratio = 1
                if product.featured_image and section.settings.height == 'portrait'
                  assign ratio = 0.8
                elsif product.featured_image and section.settings.height == 'adapt'
                  assign ratio = product.featured_image.aspect_ratio
                endif
                if ratio == 0 or ratio == null
                  assign ratio = 1
                endif
              %}
              <div class="grid__item gallery-card{% if block.settings.mobile_hidden %} small-hide{% endif %}">
                {% if product.selected_or_first_available_variant.url != blank %}
                  <a href="{{ product.selected_or_first_available_variant.url }}" class="full-unstyled-link">
                {% endif %}
                <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings gradient color-{{ section.settings.color_scheme }}{% if product.featured_image != blank %} media{% else %} image-with-text__media--placeholder placeholder{% endif %}" style="padding-bottom: {{ 1 | divided_by: ratio | times: 100 }}%;">
                  {%- if product.featured_image != blank -%}
                    {{
                      product.featured_image | image_url: width: product.featured_image.width | image_tag: fetchpriority: fetch_priority
                    }}
                  {%- else -%}
                    {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                </div>
                {% if product.selected_or_first_available_variant.url != blank %}
                  </a>
                {% endif %}
              </div>
            {% endfor %}
          {% comment %}
            {% for block in section.blocks %}
            {% case block.type %}
            {%- when 'image' -%}
            {% liquid
            assign ratio = 1
            if block.settings.image and section.settings.height == 'portrait'
            assign ratio = 0.8
            elsif block.settings.image and section.settings.height == 'adapt'
            assign ratio = block.settings.image.aspect_ratio
            endif
            if ratio == 0 or ratio == null
            assign ratio = 1
            endif
            %}
            <div class="grid__item{% if block.settings.mobile_hidden %} small-hide{% endif %}">
            {% if block.settings.image_url != blank %}
            <a href="{{ block.settings.image_url }}" class="full-unstyled-link">
            {% endif %}
            <div class="image-with-text__media image-with-text__media--{{ section.settings.height }} global-media-settings gradient color-{{ section.settings.color_scheme }}{% if block.settings.image != blank %} media{% else %} image-with-text__media--placeholder placeholder{% endif %}" style="padding-bottom: {{ 1 | divided_by: ratio | times: 100 }}%;">
            {%- if block.settings.image != blank -%}
            {{
            block.settings.image | image_url: width: block.settings.image.width | image_tag: fetchpriority: fetch_priority
            }}
            {%- else -%}
            {{ 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}
            </div>
            {% if block.settings.image_url != blank %}
            </a>
            {% endif %}
            </div>
            {% endcase %}
            {% endfor %}
          {% endcomment %}
          </div>
        </div>
        <div class="image-with-text__text-item grid__item">
          <div id="ImageWithText--{{ section.id }}" class="image-with-text__content image-with-text__content--{{ section.settings.desktop_content_position }} 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 }} content-container">
            {%- for block in section.blocks -%}
              {% case block.type %}
                {%- when 'heading' -%}
                  <h2 class="image-with-text__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>
                    {{ block.settings.heading }}
                  </h2>
                {%- when 'caption' -%}
                  <p class="image-with-text__text image-with-text__text--caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }} {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
                    {{ block.settings.caption | escape }}
                  </p>
                {%- when 'text' -%}
                  <div class="image-with-text__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
                    {{ block.settings.text }}
                  </div>
                {%- when 'button' -%}
                  {%- if block.settings.button_label != blank -%}
                    <a
                      {% if block.settings.button_link == blank %}
                      role="link"
                      aria-disabled="true"
                      {% else %}
                      href="{{ block.settings.button_link }}"
                      {% endif %}
                      class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
                      {{ block.shopify_attributes }}>
                      {{ block.settings.button_label | escape }}
                    </a>
                  {%- endif -%}
              {%- endcase -%}
            {%- endfor -%}
            <div class="promos-link small-hide">
              {% for block in section.blocks %}
                {% case block.type %}
                  {% when 'link' %}
                    <a href="{{ block.settings.url }}" class="full-unstyled-link">
                      {{ block.settings.text | upcase }} {{ 'swiper-next.svg' | inline_asset_content }}
                    </a>
                {% endcase %}
              {% endfor %}
            </div>
          </div>
        </div>
        <div class="image-with-text__link-item grid__item large-up-hide medium-hide">
          <div class="promos-link">
            {% for block in section.blocks %}
              {% case block.type %}
                {% when 'link' %}
                  <a href="{{ block.settings.url }}" class="full-unstyled-link">
                    {{ block.settings.text | upcase }} {{ 'swiper-next.svg' | inline_asset_content }}
                  </a>
              {% endcase %}
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% schema %}
  {
    "name": "Gallery with text",
    "class": "section text-with-gallery",
    "disabled_on": {
      "groups": ["header", "footer"]
    },
    "settings": [
      {
        "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"
      },
      {
        "type": "select",
        "id": "height",
        "options": [
          {
            "value": "adapt",
            "label": "Adapt to image"
          },
          {
            "value": "portrait",
            "label": "Portrait"
          },
          {
            "value": "square",
            "label": "Square"
          }
        ],
        "default": "adapt",
        "label": "t:sections.image-with-text.settings.height.label"
      },
      {
        "type": "header",
        "content": "Collection"
      },
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "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": "t:sections.image-with-text.settings.header_colors.content"
      },
      {
        "type": "select",
        "id": "section_color_scheme",
        "options": [
          {
            "value": "accent-1",
            "label": "t:sections.all.colors.accent_1.label"
          },
          {
            "value": "accent-2",
            "label": "t:sections.all.colors.accent_2.label"
          },
          {
            "value": "background-1",
            "label": "t:sections.all.colors.background_1.label"
          },
          {
            "value": "background-2",
            "label": "t:sections.all.colors.background_2.label"
          },
          {
            "value": "inverse",
            "label": "t:sections.all.colors.inverse.label"
          }
        ],
        "default": "background-1",
        "label": "Section color"
      },
      {
        "type": "select",
        "id": "color_scheme",
        "options": [
          {
            "value": "accent-1",
            "label": "t:sections.all.colors.accent_1.label"
          },
          {
            "value": "accent-2",
            "label": "t:sections.all.colors.accent_2.label"
          },
          {
            "value": "background-1",
            "label": "t:sections.all.colors.background_1.label"
          },
          {
            "value": "background-2",
            "label": "t:sections.all.colors.background_2.label"
          },
          {
            "value": "inverse",
            "label": "t:sections.all.colors.inverse.label"
          }
        ],
        "default": "background-1",
        "label": "Container color"
      },
      {
        "type": "header",
        "content": "t:sections.all.padding.section_padding_heading"
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_top",
        "default": 36
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 4,
        "unit": "px",
        "label": "t:sections.all.padding.padding_bottom",
        "default": 36
      }
    ],
    "blocks": [
      {
        "type": "heading",
        "name": "t:sections.image-with-text.blocks.heading.name",
        "limit": 1,
        "settings": [
          {
            "type": "inline_richtext",
            "id": "heading",
            "default": "t:sections.image-with-text.blocks.heading.settings.heading.default",
            "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
          },
          {
            "type": "select",
            "id": "heading_size",
            "options": [
              {
                "value": "h4",
                "label": "t:sections.all.heading_size.options__1.label"
              },
              {
                "value": "h3",
                "label": "t:sections.all.heading_size.options__2.label"
              },
              {
                "value": "h2",
                "label": "t:sections.all.heading_size.options__3.label"
              },
              {
                "value": "h1",
                "label": "t:sections.all.heading_size.options__4.label"
              }
            ],
            "default": "h1",
            "label": "t:sections.all.heading_size.label"
          }
        ]
      },
      {
        "type": "caption",
        "name": "t:sections.image-with-text.blocks.caption.name",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "caption",
            "default": "t:sections.image-with-text.blocks.caption.settings.text.default",
            "label": "t:sections.image-with-text.blocks.caption.settings.text.label"
          },
          {
            "type": "select",
            "id": "text_style",
            "options": [
              {
                "value": "subtitle",
                "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label"
              },
              {
                "value": "caption-with-letter-spacing",
                "label": "t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label"
              }
            ],
            "default": "caption-with-letter-spacing",
            "label": "t:sections.image-with-text.blocks.caption.settings.text_style.label"
          },
          {
            "type": "select",
            "id": "text_size",
            "options": [
              {
                "value": "small",
                "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label"
              },
              {
                "value": "medium",
                "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label"
              },
              {
                "value": "large",
                "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label"
              }
            ],
            "default": "medium",
            "label": "t:sections.image-with-text.blocks.caption.settings.caption_size.label"
          }
        ]
      },
      {
        "type": "text",
        "name": "t:sections.image-with-text.blocks.text.name",
        "limit": 1,
        "settings": [
          {
            "type": "richtext",
            "id": "text",
            "default": "t:sections.image-with-text.blocks.text.settings.text.default",
            "label": "t:sections.image-with-text.blocks.text.settings.text.label"
          },
          {
            "type": "select",
            "id": "text_style",
            "options": [
              {
                "value": "body",
                "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__1.label"
              },
              {
                "value": "subtitle",
                "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__2.label"
              }
            ],
            "default": "body",
            "label": "t:sections.image-with-text.blocks.text.settings.text_style.label"
          }
        ]
      },
      {
        "type": "button",
        "name": "t:sections.image-with-text.blocks.button.name",
        "limit": 1,
        "settings": [
          {
            "type": "text",
            "id": "button_label",
            "default": "t:sections.image-with-text.blocks.button.settings.button_label.default",
            "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": "t:sections.image-with-text.blocks.button.settings.outline_button.label"
          }
        ]
      },
      {
        "type": "image",
        "name": "Image",
        "limit": 9,
        "settings": [
          {
            "type": "image_picker",
            "label": "Image",
            "id": "image"
          },
          {
            "type": "url",
            "label": "URL",
            "id": "image_url"
          },
          {
            "type": "checkbox",
            "label": "Mobile hide",
            "id": "mobile_hidden"
          }
        ]
      },
      {
        "type": "link",
        "name": "Link",
        "settings": [
          {
            "type": "text",
            "label": "Text",
            "id": "text"
          },
          {
            "type": "url",
            "label": "URL",
            "id": "url"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Text with gallery",
        "blocks": [
          {
            "type": "heading"
          },
          {
            "type": "text"
          },
          {
            "type": "button"
          }
        ]
      }
    ]
  }
{% endschema %}