{#
  Bloc Module à Image — équivalent du template activity-section.html.twig
  Variables :
    block.content.title    string|null
    block.content.header   string|null
    block.content.content  string (HTML)
    block.config.layout         'visual_left' | 'visual_right'
    block.config.show_title     bool
    block.config.title_on_top   bool
    block.config.anim_text      string|null  (classe CSS scroll-reveal-*)
    block.config.anim_image     string|null  (classe CSS scroll-reveal-*)
    block.images                [{filename, alt, credits, caption}, …]
#}

{% set images       = block.images ?? [] %}
{% set hasMultiple  = images|length > 1 %}
{% set firstImage   = images[0] ?? null %}
{% set isRight      = (block.config.layout ?? 'visual_left') == 'visual_right' %}
{% set layoutClass  = isRight ? ' layout-visual-right' : '' %}
{% set showTitle    = block.config.show_title ?? true %}
{% set titleOnTop   = block.config.title_on_top ?? false %}
{% set title        = block.content.title ?? '' %}
{% set header       = block.content.header ?? '' %}
{% set content      = block.content.content ?? '' %}
{% set blockSlug    = block.anchor_key %}

{% set animTextClass  = block.config.anim_text  ? ('scroll-reveal ' ~ block.config.anim_text)  : '' %}
{% set animImageClass = block.config.anim_image ? ('scroll-reveal ' ~ block.config.anim_image) : '' %}

{% set imageBlock %}
    {% if hasMultiple %}

        <div class="swiper illustration {{ animImageClass }}" id="{{ id }}">
            <div class="swiper-wrapper">
                {% for image in images %}
                <div class="swiper-slide">
                    <img
                        src="/{{ image.filename }}"
                        alt="{{ image.alt ?? '' }}"
                        loading="lazy"
                    >
                </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 class="illustration {{ animImageClass }}">
            {% include "/base/mini-swiper.html.twig" with { 'id': blockSlug ~ '-preview', 'pictures': images } %}
        </div> #}
    {% elseif firstImage %}
        <div class="illustration {{ animImageClass }}">
            <figure class="{{ blockSlug }}-visual">
                <img src="/{{ firstImage.filename }}" alt="{{ firstImage.alt ?? '' }}" width="1200" height="900">
                {% if firstImage.credits %}<figcaption class="visual-title"><small class="credits">{{ firstImage.credits }}</small></figcaption>{% endif %}
            </figure>
        </div>
    {% endif %}
{% endset %}

{% if titleOnTop %}

<div class="container {{ blockSlug }}">
    {% if showTitle and title %}<h2>{{ title }}</h2>{% endif %}
    {% if header %}<p>{{ header }}</p>{% endif %}

    <div class="two-cols{{ layoutClass }}">
        {% if isRight %}
            <div class="presentation {{ animTextClass }}">{{ content | raw }}</div>
            {{ imageBlock }}
        {% else %}
            {{ imageBlock }}
            <div class="presentation {{ animTextClass }}">{{ content | raw }}</div>
        {% endif %}
    </div>
</div>

{% else %}

<div class="container {{ blockSlug }} two-cols{{ layoutClass }}">
    {% if isRight %}
        <div class="presentation {{ animTextClass }}">
            {% if showTitle and title %}<h2>{{ title }}</h2>{% endif %}
            {% if header %}<p>{{ header }}</p>{% endif %}
            {{ content | raw }}
        </div>
        {{ imageBlock }}
    {% else %}
        {{ imageBlock }}
        <div class="presentation {{ animTextClass }}">
            {% if showTitle and title %}<h2>{{ title }}</h2>{% endif %}
            {% if header %}<p>{{ header }}</p>{% endif %}
            {{ content | raw }}
        </div>
    {% endif %}
</div>

{% endif %}