{% 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 }}"
                                style="height: 70px">Previous Sphere</button>
                        <!-- the content of the h4 will be injected by javascript -->
                        <h4 class="pure-u-1-4 py-3 text-center" style="margin: 0px">
                            <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 }}"
                                style="height: 70px">Next Sphere</button>
                    </div>
                    <!-- glass brain with all spheres -->
                    <img id="carousel-obj-UUID-{{ unique_id }}-0"
                         class="pure-img"
                         width="100%"
                         style="display: block"
                         alt="No image to display."
                         src="data:image/svg+xml;base64,{{ content[0] }}" />
                    <!-- individual spheres -->
                    {% for map in range(1, n_displayed_maps)|list %}
                        <img id="carousel-obj-UUID-{{ unique_id }}-{{ map }}"
                             class="pure-img"
                             width="100%"
                             style="display: none"
                             alt="No image to display"
                             src="data:image/svg+xml;base64,{{ content[map] }}" />
                    {% 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> spheres in total
                    (displayed together on the first image).
                </p>
                {% if has_plotting_engine %}
                    {% if n_displayed_maps - 1 != number_of_maps %}
                        <p>
                            Only <b>{{ n_displayed_maps }}</b> specific spheres
                            can be browsed in this report
                            with <b>Previous</b> and <b>Next</b> buttons.
                        </p>
                    {% else %}
                        <p>
                            They can be individually browsed
                            using <b>Previous</b> and <b>Next</b> buttons.
                        </p>
                    {% endif %}
                {% endif %}
            {% endif %}
        </div>
    </div>
    <div class="pure-g">
        <div class="pure-u-1 pure-u-md-3-3">
            <div class="d-flex flex-column">
                {% if summary_html %}
                    <details>
                        <summary class="pure-button">Regions summary</summary>
                        <div class="table-container">{{ summary_html|safe }}</div>
                    </details>
                {% endif %}
            </div>
        </div>
    </div>

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

{% endblock report %}
