{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'main-collection-hero.css' | asset_url | stylesheet_tag }}

{%- liquid
  assign mobile_mf   = collection.metafields.collection.collection_mobile_banner
  assign desktop_img = collection.image
  assign image_ratio = section.settings.image_ratio

  assign show_mobile  = false
  assign show_desktop = false
  if section.settings.show_collection_image
    if mobile_mf != blank and mobile_mf.value != blank
      assign show_mobile = true
    endif
    if desktop_img != blank
      assign show_desktop = true
    endif
  endif

  assign mobile_img = mobile_mf.value
  if mobile_img.preview_image != blank
    assign mobile_img = mobile_img.preview_image
  endif
  assign mobile_w   = mobile_img.width  | default: 750
  assign mobile_h   = mobile_img.height | default: 750
  assign mobile_alt = mobile_img.alt    | default: collection.title

  if image_ratio == 'portrait'
    assign desktop_ratio = 0.7
    assign mobile_ratio  = 0.7
  elsif image_ratio == 'adapt'
    assign desktop_ratio = desktop_img.aspect_ratio | default: 1
    assign mobile_ratio  = mobile_img.aspect_ratio  | default: 1
  else
    assign desktop_ratio = 1
    assign mobile_ratio  = 1
  endif
-%}

<div class="collection-hero{% if show_mobile or show_desktop %} collection-hero--with-image{% endif %} color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-hero__inner{% unless section.settings.full_width %} page-width{% endunless %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">

    {%- if section.settings.show_collection_description -%}
      <div class="collection-hero__text-wrapper">
        <div class="collection-hero__description rte">{{ collection.description }}</div>
      </div>
    {%- endif -%}

    {%- if show_mobile -%}
      <div class="collection-hero__banner--mobile-only">
        <div
          class="collection-hero__image-container gradient ratio"
          style="--ratio-percent: {{ 1 | divided_by: mobile_ratio | times: 100 }}%;"
        >
          <div class="media media--transparent">
            <img
              srcset="
                {%- if mobile_w >= 375 -%}{{ mobile_img | image_url: width: 375 }} 375w,{%- endif -%}
                {%- if mobile_w >= 550 -%}{{ mobile_img | image_url: width: 550 }} 550w,{%- endif -%}
                {%- if mobile_w >= 750 -%}{{ mobile_img | image_url: width: 750 }} 750w,{%- endif -%}
                {%- if mobile_w >= 1100 -%}{{ mobile_img | image_url: width: 1100 }} 1100w,{%- endif -%}
                {%- if mobile_w >= 1500 -%}{{ mobile_img | image_url: width: 1500 }} 1500w,{%- endif -%}
                {%- if mobile_w >= 2000 -%}{{ mobile_img | image_url: width: 2000 }} 2000w,{%- endif -%}
                {{ mobile_img | image_url }} {{ mobile_w }}w
              "
              src="{{ mobile_img | image_url: width: mobile_w }}"
              sizes="100vw"
              alt="{{ mobile_alt | escape }}"
              width="{{ mobile_w }}"
              height="{{ mobile_h }}"
              loading="lazy"
            >
          </div>
        </div>
      </div>
    {%- endif -%}

    {%- if show_desktop -%}
      <div class="collection-hero__banner--desktop-only">
        <div
          class="collection-hero__image-container gradient ratio"
          style="--ratio-percent: {{ 1 | divided_by: desktop_ratio | times: 100 }}%;"
        >
          <div class="media media--transparent">
            <img
              srcset="
                {%- if desktop_img.width >= 750 -%}{{ desktop_img | image_url: width: 750 }} 750w,{%- endif -%}
                {%- if desktop_img.width >= 1100 -%}{{ desktop_img | image_url: width: 1100 }} 1100w,{%- endif -%}
                {%- if desktop_img.width >= 1500 -%}{{ desktop_img | image_url: width: 1500 }} 1500w,{%- endif -%}
                {%- if desktop_img.width >= 2000 -%}{{ desktop_img | image_url: width: 2000 }} 2000w,{%- endif -%}
                {%- if desktop_img.width >= 2500 -%}{{ desktop_img | image_url: width: 2500 }} 2500w,{%- endif -%}
                {%- if desktop_img.width >= 3000 -%}{{ desktop_img | image_url: width: 3000 }} 3000w,{%- endif -%}
                {{ desktop_img | image_url }} {{ desktop_img.width }}w
              "
              src="{{ desktop_img | image_url: width: desktop_img.width }}"
              sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width }}px, 100vw"
              alt="{{ desktop_img.alt | escape }}"
              width="{{ desktop_img.width }}"
              height="{{ desktop_img.height }}"
              loading="lazy"
            >
          </div>
        </div>
      </div>
    {%- endif -%}

  </div>
</div>

{% schema %}
{
  "name": "Main collection banner",
  "class": "section main-collection-banner",
  "settings": [
    {
      "type": "checkbox",
      "id": "full_width",
      "default": false,
      "label": "Full width"
    },
    {
      "type": "paragraph",
      "content": "t:sections.main-collection-banner.settings.paragraph.content"
    },
    {
      "type": "checkbox",
      "id": "show_collection_description",
      "default": true,
      "label": "t:sections.main-collection-banner.settings.show_collection_description.label"
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "default": false,
      "label": "t:sections.main-collection-banner.settings.show_collection_image.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
        }
      ],
      "default": "square",
      "label": "t:sections.collection-list.settings.image_ratio.label",
      "info": "t:sections.collection-list.settings.image_ratio.info"
    },
    {
      "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": "t:sections.all.colors.label"
    }
  ],
  "presets": [
    {
      "name": "Main collection banner"
    }
  ]
}
{% endschema %}