{% set mq = {
	'super-wide': 'min-width: 1800px',
	'extra-wide': 'min-width: 1400px',
	'wide': 'min-width: 1200px',
	'large': 'min-width: 900px',
	'medium': 'min-width: 600px',
	'small': 'max-width: 600px',
} %}

{% set tagName = sources or caption ? 'picture' : 'div' %}
{% set classNames = ['image'] %}

{% set srcset = [] %}
{% for size in sizes %}
	{% set srcset = srcset|merge([size.url ~ ' ' ~ (retina ? loop.index ~ 'x' : size.width ~ 'w')]) %}
{% endfor %}

{% set imgAttr = {
	'src': url,
	'alt': alt|default(''),
	}
	|merge(sizes is defined and sizes and retina is not defined or retina == false ? { 'sizes': '100vw' } : {})
	|merge(srcset|length ? { 'srcset': srcset|join(',') } : {})
	|merge(attributes ?: {})
%}
<{{ tagName }} class="{{ classNames|join(' ') }}{% if classes is defined and classes|length %} {{ classes|join(' ') }}{% endif %}"{% if contain is defined and contain %} style="max-width: {{ width }}px;"{% endif %}>
	{% if link is defined and link %}<a href="{{ link }}" target="_blank" rel="noopener">{% endif %}
	<div class="image-inner">
		{% if sources is defined and sources %}
			{% for breakpoint, block in sources|reverse %}
				<span style="padding-bottom: {{ block.height / block.width * 100 }}%;" class="image-placeholder {{ breakpoint }}"></span>
				<source srcset="{{ block.url }}" media="({{ mq[breakpoint] }})">
			{% endfor %}
		{% endif %}
		<span style="padding-bottom: {{ (aspectRatio is defined and aspectRatio|length ? (aspectRatio|split('/')[1] / aspectRatio|split('/')[0]) : (height / width)) * 100 }}%;" class="image-placeholder{{ transparent ? ' transparent' : '' }}"{% if lazyload %} data-img-attr='{{ imgAttr|json_encode }}'{% endif %}></span>
		{% if lazyload %}
			<noscript><img{% for key, value in imgAttr %} {{ key }}="{{ value }}"{% endfor %}></noscript>
		{% else %}
			<img{% for key, value in imgAttr %} {{ key }}="{{ value }}"{% endfor %}>
		{% endif %}
	</div>
	{% if link is defined and link %}</a>{% endif %}
	{% if caption %}
		<figcaption class="image-caption">{{ caption }}</figcaption>
	{% endif %}
</{{ tagName }}>