{#
  Bloc Palette Chambres
  Variables :
    block.content.title   string|null  — h2 optionnel
    block.content.intro   string|null  — texte d'introduction (HTML)
    block.config.display    'large'|'contained'
    block.config.alignment  'centered'|'flag'
    block.rooms           [{slug, name, url, previewImage, previewImageSm, primary_image_alt}, …]
#}
{% set rooms     = block.rooms ?? [] %}
{% set display   = block.config.display ?? 'contained' %}
{% set alignment = block.config.alignment ?? 'flag' %}
{% set title     = block.content.title ?? '' %}
{% set intro     = block.content.intro ?? '' %}

<div class="palette-block palette-block--{{ alignment }}">

    {% if title or intro %}
        <div class="container palette-block__header">
            {% if title %}<h2>{{ title }}</h2>{% endif %}
            {% if intro %}<div class="palette-block__intro">{{ intro | raw }}</div>{% endif %}
        </div>
    {% endif %}

    {% if rooms | length > 0 %}
        <div class="palette {{ display == 'contained' ? 'container' : '' }}">
            {% for room in rooms %}
                {% set isLast = loop.last and (rooms | length) is odd %}
                {% set revealClass = isLast
                    ? 'scroll-reveal-sides'
                    : (loop.index is odd ? 'scroll-reveal-slide-left' : 'scroll-reveal-slide-right') %}
                <a href="{{ room.url }}" class="palette-link palette-item scroll-reveal {{ revealClass }}">
                    <figure>
                        <img
                            src="/{{ room.previewImage }}"
                            srcset="/{{ room.previewImageSm }} 600w, /{{ room.previewImage }} 1200w"
                            sizes="(max-width: 767px) 100vw, 50vw"
                            alt="{{ room.primary_image_alt ?? room.name }}"
                            width="1200" height="900"
                            loading="lazy"
                        >
                        <figcaption class="visual-title"><h3>{{ room.name }}</h3></figcaption>
                    </figure>
                </a>
            {% endfor %}
        </div>
    {% endif %}

</div>