{% 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>
                    {{ figure|safe }}
                </div>
            {% endif %}
        </div>
        <div class="pure-u-1 pure-u-md-1-3">
            <p>{{ description }}</p>
            {% if number_of_regions %}
                <p>
                    The masker has <b>{{ number_of_regions }}</b> different potentially overlapping regions.
                </p>
                {% if n_displayed_maps != number_of_maps %}
                    <p>
                        Only <b>{{ n_displayed_maps }}</b> regions are shown in this report.
                    </p>
                {% endif %}
            {% endif %}
            {% if n_vertices %}
                <div>
                    <table class="pure-table">
                        <thead>
                            <tr>
                                <th>Hemisphere</th>
                                <th>Number of vertices</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for hemi in n_vertices %}
                                <tr>
                                    <td data-column="Hemisphere">{{ hemi }}</td>
                                    <td data-column="Number of vertices">{{ n_vertices[hemi] }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>

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

{% endblock report %}
