{% extends "territories_dashboard_lib/website/layout/base.html" %}

{% load static %}
{% load other_filters %}

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

{% block extra_head %}
    <script defer src="{% static 'territories_dashboard_lib/website/js/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>
    {{ 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/theme/page.mjs' %}"></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/themes/components/extremum.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/themes-list.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/side_panel_methodo.css" %}
{% endblock %}


{% block main %}

<div class="tdbmd-thematics">
    <div class="fr-grid-row">
        <aside class="fr-col-md-3 fr-col-12 fr-pt-md-5w fr-pt-0">
            {% include "territories_dashboard_lib/website/pages/indicators/components/themes-nav.html" %}
        </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" %}
            {% 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>{{ theme.title }}</h1>
                    <div class="fr-grid-row">
                        <div class="fr-col-12 fr-col-md-6">
                            <p class="fr-text--sm fr-mb-0">
                                <strong>Objectif</strong>
                            </p>
                            <p class="fr-text--sm">{{ theme.objectif_theme }}</p>
                            </div>
                            <div class="fr-col-12 fr-col-md-6">
                            <p class="fr-text--sm fr-mb-0">
                                <strong>Action(s) visée(s)</strong>
                            </p>
                            <p class="fr-text--sm">{{ theme.action_theme }}</p>
                        </div>
                    </div>
                </div>
                {% for sub_theme in sub_themes %}
                    <section
                        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 }}</h2>
                        {% for indicator in sub_theme.indicators %}
                            {% with indicator.id|stringformat:"i"|add:"-api-urls" as script_name %}
                                {{ indicator|indicator_api_urls|json_script:script_name }}
                            {% endwith %}
                            {% include "./components/indicateur-card.html" with indicator=indicator %}
                        {% endfor %}
                    </section>
                {% endfor %}
                {% include "territories_dashboard_lib/website/pages/indicators/components/side_panel_geo.html" %}
                {% include "territories_dashboard_lib/website/pages/indicators/components/side_panel_methodo.html" %}
            </div>
        </main>
    </div>
</div>

{% endblock %}