{#
  Bloc Image illustrée
  Variables :
    block.images[].filename  string     — chemin de l'image
    block.images[].alt       string     — texte alternatif (multilingue via page_block_image_translations)
    block.images[].caption   string     — légende optionnelle (multilingue via page_block_image_translations)
    block.images[].credits   string     — crédit optionnel (non-multilingue, page_block_images.credits)

  Rendu :
    - 1 image  → <figure> simple
    - N images → Swiper avec navigation prev/next
#}
{% set images    = block.images ?? [] %}
{% set count     = images | length %}
{% set blockSlug = block.anchor_key %}

{% if count == 1 %}

    {% set image = images[0] %}
    <div class="container block-illustration-image">
        <figure class="block-illustration-image__figure">
            <img
                src="/{{ image.filename }}"
                alt="{{ image.alt ?? '' }}"
                loading="lazy"
            >
            {% if image.caption is not empty or image.credits is not empty %}
            <figcaption class="block-illustration-image__meta">
                {% if image.caption is not empty %}
                    <span class="block-illustration-image__caption">{{ image.caption }}</span>
                {% endif %}
                {% if image.credits is not empty %}
                    <small class="credits">{{ image.credits }}</small>
                {% endif %}
            </figcaption>
            {% endif %}
        </figure>
    </div>

{% elseif count > 1 %}

    <div class="container block-illustration-image">
        <div class="swiper block-illustration-image__swiper" id="{{ blockSlug }}-swiper">
            <div class="swiper-wrapper">
                {% for image in images %}
                <div class="swiper-slide">
                    <figure>
                        <img
                            src="/{{ image.filename }}"
                            alt="{{ image.alt ?? '' }}"
                            loading="lazy"
                        >
                        {% if image.caption is not empty or image.credits is not empty %}
                        <figcaption class="block-illustration-image__meta">
                            {% if image.caption is not empty %}
                                <span class="block-illustration-image__caption">{{ image.caption }}</span>
                            {% endif %}
                            {% if image.credits is not empty %}
                                <small class="credits">{{ image.credits }}</small>
                            {% endif %}
                        </figcaption>
                        {% endif %}
                    </figure>
                </div>
                {% endfor %}
            </div>

            <div class="swiper-button-prev"><i class="fa-light fa-chevron-left"></i></div>
            <div class="swiper-button-next"><i class="fa-light fa-chevron-right"></i></div>
        </div>
    </div>

{% endif %}