{% macro html(src, src_srcset, avif, webp, alt, lazy, size_range, caption='') %}
  {% if src_srcset %}
  <picture>
    <source
      type="image/avif"
      srcset="{% if size_range == 'small' %}{{ avif|createSmallSrcSet }}{% elif size_range == 'medium' %}{{ avif|createMediumSrcSet }}{% else %}{{ avif|createLargeSrcSet }}{% endif %}"
    />
    <source
      type="image/webp"
      srcset="{% if size_range == 'small' %}{{ webp|createSmallSrcSet }}{% elif size_range == 'medium' %}{{ webp|createMediumSrcSet }}{% else %}{{ webp|createLargeSrcSet }}{% endif %}"
    />
    <img 
    {% if lazy == 'true' %} 
      loading="lazy"
    {% endif %}
      src="{{ src }}"
      srcset="{% if size_range == 'small' %}{{ src_srcset|createSmallSrcSet }}{% elif size_range == 'medium' %}{{ src_srcset|createMediumSrcSet }}{% else %}{{ src_srcset|createLargeSrcSet }}{% endif %}"
    alt="{{ alt }}" />
  </picture>
  {% elif (srcset == null) and (webp and avif) %}
  <picture>
    <source
      type="image/avif"
      srcset="{{ avif }}"
    />
    <source
      type="image/webp"
      srcset="{{ webp }}"
    />
    <img 
    {% if lazy == 'true' %} 
      loading="lazy"
    {% endif %}
      src="{{ src }}" alt="{{ alt }}" />
  </picture>
  {% else %}
    <img 
    {% if lazy == 'true' %}
      loading="lazy"
    {% endif %}
      src="{% static src %}"  alt="{{ alt }}">
  {% endif %}

  {% if caption %}
    <figcaption class="figcaption">{{ caption }}</figcaption>
  {% endif %}

{% endmacro %}


{% macro inline(item) %}
<figure class="image inline">
  {{ html(item.src, item.src_srcset, item.avif, item.webp, item.alt, item.lazy, item.size_range, item.caption) }}
</figure>
{% endmacro %}

{% macro inset(item) %}
<div class="image inset-container">
  <figure class="inset">
    {{ html(item.src, item.src_srcset, item.avif, item.webp, item.alt, item.lazy, item.size_range, item.caption) }}
  </figure>
</div>
{% endmacro %}

{% macro diptych(item) %}
<div class="image photoset">
<figure>
 <div class="diptych-container">
    <figure class="diptych">
      {{ html(src = item.src1, src_srcset = item.src_srcset1, avif = item.avif1, webp = item.webp1, size_range = item.size_range1, alt = item.alt1, lazy = item.lazy) }}
    </figure>
    <figure class="diptych">
      {{ html(src = item.src2, src_srcset = item.src_srcset2, avif = item.avif2, webp = item.webp2, size_range = item.size_range2, alt = item.alt2, lazy = item.lazy) }}
    </figure>
  </div>
  <figcaption class="figcaption">
    <span class="mobile-caption">{{ item.caption_mobile }}</span>
    <span class="desktop-caption">{{ item.caption_desktop }}</span>
  </figcaption>
</figure>
</div>
{% endmacro %}