{% comment %}
Required values
image: <image object>
alt: <image alt property>
______________
Optional values
progressive: <boolean>
stretch_width: <boolean>
additional_classes: <string>
inline_style: <string>
back_to_basics: <boolean>
object_fit: <boolean>
max_height: <number>
{% endcomment %}

{% comment %}Check if image is progressive (does not support transparent pngs){% endcomment %}
{% if progressive %}
  {%- capture srcset -%}
    {{ image | img_url: '1600x', format: 'pjpg' }} 1600w,
    {{ image | img_url: '1400x', format: 'pjpg' }} 1400w,
    {{ image | img_url: '1200x', format: 'pjpg' }} 1200w,
    {{ image | img_url: '1000x', format: 'pjpg' }} 1000w,
    {{ image | img_url: '800x', format: 'pjpg' }} 800w,
    {{ image | img_url: '600x', format: 'pjpg' }} 600w,
    {{ image | img_url: '400x', format: 'pjpg' }} 400w,
    {{ image | img_url: '200x', format: 'pjpg' }} 200w
  {%- endcapture -%}
{% else %}
  {%- capture srcset -%}
    {{ image | img_url: '1600x' }} 1600w,
    {{ image | img_url: '1400x' }} 1400w,
    {{ image | img_url: '1200x' }} 1200w,
    {{ image | img_url: '1000x' }} 1000w,
    {{ image | img_url: '800x' }} 800w,
    {{ image | img_url: '600x' }} 600w,
    {{ image | img_url: '400x' }} 400w,
    {{ image | img_url: '200x' }} 200w
  {%- endcapture -%}
{% endif %}

{% comment %}Loading style{% endcomment %}
{% if settings.image_loading_style == 'blur-up' %}
  {% comment %}Low quality image loads first{% endcomment %}
  {% assign low_quality_image = image | img_url: '50x' %}
{% elsif settings.image_loading_style == 'color' %}
  {% comment %}Dominant image color loads first{% endcomment %}
  {% assign dominant_color_image = image | img_url: '1x' %}
  {% if object_fit == true %}
    {% capture crop_to_aspect_ratio %}
        max-height: {{ max_height }}px; width: calc({{ image.width }} /  {{ image.height }} * {{ max_height }}px);
    {% endcapture %}
  {% endif %}

  {% capture background_color %}
    background: url({{ dominant_color_image }});
  {% endcapture %}
{% endif %}


{% if back_to_basics %}
  <div class="image-element__wrap" style="{{ background_color }}{{ crop_to_aspect_ratio }};">
      <img  alt="{{ alt | escape }}" src="{{ image | img_url: '2000x' }}" 
            {% if inline_style %}
              style="{{ inline_style }}"
            {% endif %}
            {% if additional_classes %}
              class="lazyload {{ additional_classes }}"
            {% endif %}
      />
  </div>
{% else %}
{% comment %}Build image element{% endcomment %}
<div class="image-element__wrap" style="{{ background_color }}{{ crop_to_aspect_ratio }} {% unless stretch_width == true or object_fit %}max-width: {{ image.width }}px;{% endunless %}">
  {% comment %}
  <img  alt="{{ alt | escape }}"
        {% if low_quality_image %}
          src="{{ low_quality_image }}"
        {% endif %}
        data-src="{{ image | img_url: '1600x' }}"
        data-sizes="auto"
        data-aspectratio="{{ image.width }}/{{ image.height }}"
        data-srcset="{{ srcset }}"
        height="{{ image.height }}"
        width="{{ image.width }}"
        style="{{ inline_style }};"
        class="lazyload transition--{{ settings.image_loading_style }} {{ additional_classes }}"
  />
  {% endcomment %}
  <img  alt="{{ alt | escape }}"
        {% if low_quality_image %}
          src="{{ low_quality_image }}"
        {% endif %}
        data-src="{{ image | img_url: '1600x' }}"
        data-sizes="auto"
        data-aspectratio="{{ image.width }}/{{ image.height }}"
        data-srcset="{{ srcset }}"
        height="{{ image.height }}"
        width="{{ image.width }}"
        style="height: auto; {{ inline_style }};" sizes="auto"
        class="lazyload transition--{{ settings.image_loading_style }} {{ additional_classes }}"
  />
</div>
{% endif %}

{% comment %}Fallback for no javascript{% endcomment %}
<noscript>
  <img src="{{ image | img_url: '2000x' }}" alt="{{ alt | escape }}" class="lazyload {{ additional_classes }}">
</noscript>