{% set n_displayed_maps = displayed_maps|length %}

{% if engine == 'plotly' %}
    <div class="mt-3 d-flex justify-content-center">
        <div class="pure-img"
             width="100%"
             id="carousel-obj-UUID-{{ unique_id }}-0"
             style="display: block"
             alt="plotly image">{{ content[0]|safe }}</div>
        {% for map in range(1, n_displayed_maps) %}
            <div id="carousel-obj-UUID-{{ unique_id }}-{{ map }}"
                 style="display: none">{{ content[map]|safe }}</div>
        {% endfor %}
    </div>
{% else %}
    <img id="carousel-obj-UUID-{{ unique_id }}-0"
         class="pure-img"
         width="100%"
         src="data:image/png;base64,{{ content[0] }}"
         style="display: block"
         alt="matplotlib image" />
    {% for map in range(1, n_displayed_maps) %}
        <img id="carousel-obj-UUID-{{ unique_id }}-{{ map }}"
             class="pure-img"
             width="100%"
             src="data:image/png;base64,{{ content[map] }}"
             style="display: none"
             alt="matplotlib image" />
    {% endfor %}
{% endif %}
