{% extends "html/body_base.jinja" %}

{% set n_displayed_maps = displayed_maps|length %}

{% block report %}
    <div class="pure-g">
        <div class="pure-u-1 pure-u-md-2-3">
            {% if not has_plotting_engine %}

                {% include "html/partials/missing_plotting_engine.jinja" %}

            {% elif content %}
                <div class="image">
                    <div class="pure-g d-flex justify-content-center align-items-stretch mt-2">
                        <button class="btn pure-u-1-3 text-center rounded-2"
                                id="prev-btn-UUID-{{ unique_id }}">
                            Previous Map
                        </button>
                        <h4 class="pure-u-1-4 py-3 text-center" style="margin: 0px">
                            Map <span id="comp-UUID-{{ unique_id }}"></span>
                        </h4>
                        <button class="btn pure-u-1-3 text-center rounded-2"
                                id="next-btn-UUID-{{ unique_id }}">
                            Next Map
                        </button>
                    </div>
                    <img id="carousel-obj-UUID-{{ unique_id }}-0"
                         class="pure-img"
                         width="100%"
                         src="data:image/svg+xml;base64,{{ content[0] }}"
                         style="display: block"
                         alt="No image to display" />
                    {% for map in range(1, n_displayed_maps)|list %}
                        <img id="carousel-obj-UUID-{{ unique_id }}-{{ map }}"
                             class="pure-img"
                             width="100%"
                             src="data:image/svg+xml;base64,{{ content[map] }}"
                             style="display: none"
                             alt="No image to display" />
                    {% endfor %}
                </div>
            {% endif %}
        </div>
        <div class="pure-u-1 pure-u-md-1-3">
            <p>{{ description }}</p>
            {% if number_of_maps %}
                <p>
                    The masker has <b>{{ number_of_maps }}</b> spatial maps in total.
                </p>
                {% if has_plotting_engine and n_displayed_maps != number_of_maps %}
                    <p>
                        Only <b>{{ n_displayed_maps }}</b> spatial maps are shown in this report.
                    </p>
                {% endif %}
            {% endif %}
        </div>
    </div>

    {% include "html/maskers/partials/parameters.jinja" %}
    {% include "html/maskers/partials/info_transfom.jinja" %}
    {% include "html/maskers/partials/carousel.jinja" %}

{% endblock report %}
