{% set breakpoints = {
   desktop: 0,
   tablet: 1024,
   mobile: 640,
} %}

<picture
      {{ attributes.defaults(stimulus_controller(this.shortName, {
            productId: this.id_product,
         }))
      }}
      {% set photos = this.productUnified.getPhotos %}
      {{
         stimulus_action(this.shortName, 'handleImageMouseOver', 'mouseover', (photos[0] is defined) ? {secondImageSrc: photos[0].src} : {})
         |stimulus_action(this.shortName, 'handleImageMouseLeave', 'mouseleave')
      }}
>
   {% for name, size in this.sizes|reverse %}
      {% if loop.last %}
         <img src="{{ size.src }}" class="{{ this.img_class }}" width="{{ size.width }}" height="{{ size.height }}"
              alt="{{ this.alt ?? size.title }}"{% if this.is_lazy %} loading="lazy"{% endif %}
               {{ stimulus_target(this.shortName, 'img') }}
               data-original-src="{{ size.src }}"
         >
      {% else %}
         <source srcset="{{ size.src }}" media="(max-width: {{ size.breakpoint ?? breakpoints[name] }}px)">
      {% endif %}
   {% endfor %}
   <twig:block name="content"></twig:block>
</picture>
