{% comment %}
  Image

  Accepts:
  - image: {Image} Image source (required)
  - lazyload: {Boolean} Lazyload image. Default: true (optional)
  - container_class: {String} Class of the container image (optional)
  - class: {String} Class of the image (required)
  - placeholder: {String} Placeholder SVG. Default: "detailed-apparel-1" (optional)
  - attrs: {String} Additional attributes of the image. Default: "" (optional)
  - width: {Number} Width of the image (optional)
  - media_aspect_ratio: {Number} Aspect ratio of the image (optional)

  Usage:
  {% render 'image',
    image: section.settings.image,
  %}
{% endcomment %}

{% liquid
  assign global_lazyload = settings.image_lazyload
  if lazyload == null
    assign lazyload = global_lazyload
  endif
  if media_aspect_ratio == blank
    assign media_aspect_ratio = image.aspect_ratio
  endif
%}

<div class='xo-image{%- if container_class %} {{ container_class }}{% endif -%}' style='--xo-ratio-percent: {{ media_aspect_ratio }}'>
  {%- if image != blank -%}
    <img
      {%- if lazyload %}
        is='xo-lazyload'
        xo-src='{{ image.src | image_url: width: 100 }}'
        loading='lazy'
      {% else %}
        is='xo-lazyload'
        xo-src='{{ image.src | image_url: width: 100 }}'
      {% endif -%}
      {%- if class != blank %}
        class='{{ class }}'
      {% endif -%}
      alt='{{ image.alt | default: '' | escape }}'
      width='{{ image.width | default: '' }}'
      height='{{ image.height | default: '' }}'
      xo-intrinsic-width='{{ image.width | default: '' }}'
      xo-intrinsic-height='{{ image.height | default: '' }}'
      {%- if attrs -%}
        {{ attrs -}}
      {% endif -%}
    >
    {%- if lazyload -%}
      <div class='xo-image__overlay xo-lazyload-overlay'>
        <div class='xo-image__loading'>
          {% liquid
            case settings.image_lazyload_loading
              when 'loader-1'
                render 'loader-1', color: 'rgb(var(--color-foreground))'
              when 'loader-2'
                render 'loader-2', color: 'rgb(var(--color-foreground))'
              when 'loader-3'
                render 'loader-3', color: 'rgb(var(--color-foreground))'
              else
                render 'loader-3', color: 'rgb(var(--color-foreground))'
            endcase
          %}
        </div>
      </div>
    {%- endif -%}
  {%- else -%}
    {{ placeholder | default: 'detailed-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
  {%- endif -%}
</div>
