<picture class="lbcamden-image__wrapper">
  {% set sizes = [{ mq: "(min-width: 992px)", w: params.widths.wide }, { mq: "(min-width: 768px)", w: params.widths.desktop }, { mq: "(min-width: 641px)", w: params.widths.tablet }, { mq: "(min-width: 576px)", w: params.widths.mobileLarge }, { mq: "(min-width: 320px)", w: params.widths.mobile } ] %}

  {% for source in params.sources %}
    {% set srcsetComma = joiner(", ") %}
    {% set sizesComma = joiner(", ") %}

    <source
      type="{{ source.type }}"
      srcset="{% for item in source.sources %}{{ srcsetComma() }}{{ item.src }} {% if item.width %}{{ item.width }}w{% endif %}{% endfor %}"
      sizes="{% for size in sizes | selectattr("w") %}{{ sizesComma() }}{% if not loop.last %}{{ size.mq }} {% endif %}{{ size.w }}{% endfor %}"
    />
  {% endfor %}

  {% set style = params.attributes.style %}

  <img
    class="lbcamden-image {{ params.classes }}"
    src="{{ params.src }}"
    alt="{{ params.alt }}"
    {% if params.width %}width="{{ params.width }}"{% endif %}
    {% if params.height %}height="{{ params.height }}"{% endif %}
    {% if params.lazy %}loading="lazy"{% endif %}
    {%- for attribute, value in params.attributes %}{% if attribute != "style" %} {{ attribute }}="{{ value }}"{% endif %}{% endfor %}
    style="{{ style }}"
  />
</picture>
