{% extends "territories_dashboard_lib/website/pages/page.html" %}
{% load static %}
{% load other_filters %}

{% block page_title %}Comparaison - {{theme.title}}{% endblock %}

{% block extra_head%}
    <script defer src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script defer src="{% static 'territories_dashboard_lib/website/js/chartjs-plugin-datalabels.js' %}"></script>
    <script defer src="{% static 'territories_dashboard_lib/website/js/html2canvas.js' %}"></script>
    <script defer src="{% static 'territories_dashboard_lib/website/js/patternomaly.js' %}"></script>
    {{ params|json_script:"params-js" }}
    {{ sub_themes|json_script:"sub-themes-js" }}
    <script defer type="module" src="{% static 'territories_dashboard_lib/website/js/pages/indicators/comparaison/page.mjs' %}"></script>
    <script>
        {% include "territories_dashboard_lib/website/pages/indicators/components/themes-nav.js" %}
    </script>
{% endblock %}

{% block css %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/geo_params.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/chart-buttons.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/no-data.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/themes/components/extremum.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/themes-list.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/themes-nav.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/themes/components/indicateur-card.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/indicator-card.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/side_panel_geo.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/side_panel.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/themes-nav.css" %}
{% endblock %}


{% block main %}

<div class="tdbmd-thematics">
    <div class="fr-grid-row">
        <aside id="left-menu" class="fr-col-md-3 fr-col-12 fr-py-md-5w fr-pt-0">
            {% include "territories_dashboard_lib/website/pages/indicators/components/themes-nav.html" with comparison=True %}
        </aside>
        <main role="main" class="tdbmd-thematics__content tdbmd-content fr-col-12 fr-col-md-9" id="contenu" tabindex="-1">
            {% include "territories_dashboard_lib/website/pages/indicators/components/geo_params.html" with comparison=True %}
            {% include "territories_dashboard_lib/website/pages/indicators/components/themes-list.html" %}
            <div>
                <div class="fr-pr-md-4w fr-pl-md-4w fr-pr-2w fr-pl-2w fr-mt-4w">
                    <h1>Comparaison : {{ theme.title }}</h1>
                </div>
                {% for sub_theme in sub_themes %}
                    <div
                        id="{{sub_theme.name}}"
                        class="subtheme fr-pr-md-4w fr-pl-md-4w fr-pr-2w fr-pl-2w fr-pt-5w fr-pb-5w"
                    >
                        <h2>
                            {{ sub_theme.title }}
                            {% include "territories_dashboard_lib/website/pages/indicators/components/anchor.html" with anchor=sub_theme.name only %}
                        </h2>
                        {% for indicator in sub_theme.indicators %}
                            {% include "./components/indicateur-card.html" with indicator=indicator %}
                        {% endfor %}
                    </div>
                {% endfor %}
                {% include "territories_dashboard_lib/website/pages/indicators/components/side_panel_geo.html" %}
            </div>
        </main>
    </div>
</div>

{% endblock %}
