{# templates/partials/_carousel_projet.html.twig #}

{% if images|length == 1 %}
<div id="carousel" class="monoslide">
  {% set image = images|first %}
  <picture>
    <source
      type="image/webp"
      srcset="
        {{ asset('images/projets/' ~ image.imageName) | imagine_filter('m_600_webp') }} 600w,
        {{ asset('images/projets/' ~ image.imageName) | imagine_filter('l_1024_webp') }} 1024w,
        {{ asset('images/projets/' ~ image.imageName) | imagine_filter('xl_2048_webp') }} 2048w
      "
      sizes="100vw"
    />
    <img
      src="{{ asset('images/projets/' ~ image.imageName) | imagine_filter('l_1024') }}"
      srcset="
        {{ asset('images/projets/' ~ image.imageName) | imagine_filter('m_600') }} 600w,
        {{ asset('images/projets/' ~ image.imageName) | imagine_filter('l_1024') }} 1024w,
        {{ asset('images/projets/' ~ image.imageName) | imagine_filter('xl_2048') }} 2048w
      "
      sizes="100vw"
      width="1024" height="576"
      alt="Sensipode – {{ image.imageName }}"
      decoding="async"
      fetchpriority="high"
      loading="eager"
      style="aspect-ratio:16/9;object-fit:cover;width:100%;height:auto"
    />
  </picture>
</div>

{% elseif images|length > 1 %}
<div id="carousel" class="multislides">
  <div id="slides">
    {% for image in images %}
      <div class="slide">
        <picture>
          <source
            type="image/webp"
            srcset="
              {{ asset('images/projets/' ~ image.imageName) | imagine_filter('s_400_webp') }} 400w,
              {{ asset('images/projets/' ~ image.imageName) | imagine_filter('m_600_webp') }} 600w,
              {{ asset('images/projets/' ~ image.imageName) | imagine_filter('l_1024_webp') }} 1024w
            "
            sizes="100vw"
          />
          <img
            src="{{ asset('images/projets/' ~ image.imageName) | imagine_filter('m_600') }}"
            srcset="
              {{ asset('images/projets/' ~ image.imageName) | imagine_filter('s_400') }} 400w,
              {{ asset('images/projets/' ~ image.imageName) | imagine_filter('m_600') }} 600w,
              {{ asset('images/projets/' ~ image.imageName) | imagine_filter('l_1024') }} 1024w
            "
            sizes="100vw"
            width="1024" height="576"
            alt="Sensipode – {{ image.imageName }}"
            decoding="async"
            {% if loop.first %}
              fetchpriority="high"
              loading="eager"
            {% else %}
              loading="lazy"
            {% endif %}
            style="aspect-ratio:16/9;object-fit:cover;width:100%;height:auto"
          />
        </picture>
      </div>
    {% endfor %}
  </div>
</div>
{% endif %}