{# variant: 'dashboard' | 'page' — page = parallax léger au scroll #}
{% set hero_banner_pairs = page_banner_pairs() %}
{% if hero_banner_pairs is not empty %}
    {% set hero_banner = random(hero_banner_pairs) %}
    {% set banner_variant = variant|default('page') %}
    <div
        class="hero-banner{% if 'page' == banner_variant %} hero-banner--parallax{% endif %}"
        data-hero-banner
        {% if 'page' == banner_variant %}data-hero-banner-parallax{% endif %}
        data-hero-banner-pairs="{{ hero_banner_pairs|map(p => { light: asset(p.light), dark: asset(p.dark) })|json_encode|e('html_attr') }}"
    >
        <div class="hero-banner__layer"{% if 'page' == banner_variant %} data-hero-banner-layer{% endif %}>
            <span
                class="hero-banner__bg hero-banner__bg--light"
                style="background-image: url('{{ asset(hero_banner.light) }}')"
                data-hero-banner-bg="light"
                aria-hidden="true"
            ></span>
            <span
                class="hero-banner__bg hero-banner__bg--dark"
                style="background-image: url('{{ asset(hero_banner.dark) }}')"
                data-hero-banner-bg="dark"
                aria-hidden="true"
            ></span>
        </div>
        <button
            type="button"
            class="hero-banner__expand"
            data-hero-banner-expand
            data-lpf-lightbox-open
            data-lpf-lightbox-theme="banner"
            data-lpf-lightbox-src="{{ asset(hero_banner.light) }}"
            data-hero-banner-src-light="{{ asset(hero_banner.light) }}"
            data-hero-banner-src-dark="{{ asset(hero_banner.dark) }}"
            aria-label="Agrandir la bannière"
            title="Agrandir la bannière"
        >
            <i class="ti ti-arrows-maximize" aria-hidden="true"></i>
        </button>
    </div>
{% endif %}