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

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

{% block page_title %}Portrait de territoire{% 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/react18.js' %}"></script>
    <script defer src="{% static 'territories_dashboard_lib/website/js/reactdom18.js' %}"></script>
    <script defer src="{% static 'territories_dashboard_lib/website/js/patternomaly.js' %}"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
    <script defer src=" https://cdn.jsdelivr.net/npm/d3-sankey@0.12.3/dist/d3-sankey.min.js "></script>
    <script defer src="https://unpkg.com/deck.gl@9.0.38/dist.min.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v3.9.1/mapbox-gl.css" rel="stylesheet">
    <script defer src="https://api.mapbox.com/mapbox-gl-js/v3.9.1/mapbox-gl.js"></script>
    <script defer src="{% static 'territories_dashboard_lib/website/js/html2canvas.js' %}"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <script defer src="{% static 'territories_dashboard_lib/website/react/vendors.bundle.js' %}"></script>
    <script defer src="{% static 'territories_dashboard_lib/website/react/sankeyGraph.bundle.js' %}"></script>
    <script defer src="{% static 'territories_dashboard_lib/website/react/indicatorMap.bundle.js' %}"></script>

    {{ params|json_script:"params-js" }}

    <script defer type="module" src="{% static 'territories_dashboard_lib/website/js/pages/indicators/picture/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/side_panel_geo.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/side_panel.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/sankey.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/map.css" %}
    {% include "territories_dashboard_lib/website/pages/indicators/components/unit_toggle.css" %}
    {% include "./page.css" %}
    {% include "./components/components.css" %}
{% endblock %}


{% block main %}
    {% for indicator in indicators %}
        <indicator-data data-id="{{indicator.id}}">
            {{ indicator|json_script }}
        </indicator-data>
    {% endfor %}

    {% include "territories_dashboard_lib/website/pages/indicators/components/geo_params.html" %}
    <main role="main" class="fr-container fr-pt-md-8w fr-pb-md-10w fr-pt-4w fr-pb-6w" id="contenu" tabindex="-1">
        <h1>Portrait {{ params.meshes_of_the_titles|get_item:params.territory_mesh }} {{ params.territory_name }}</h1>
        {% include "territories_dashboard_lib/website/pages/indicators/components/side_panel_geo.html" %}
        {% include "./components/settings.html" %}
        {% include "./components/summary.html" %}
        {% for section in picture_config.sections %}
            <section>
                <h2 id="{{ section.title_id }}" data-number="{{ section.title_number }}">
                    {{ section.title }}
                    {% include "territories_dashboard_lib/website/pages/indicators/components/anchor.html" with anchor=section.title_id only %}
                </h2>
                <div class="picture-row">
                    {% for component in section.components %}
                        {% include "./components/component.html" %}
                    {% endfor %}
                </div>
                {% for subsection in section.subsections %}
                    <section class="subsection">
                        <div class="subsection-header">
                            <h3 id="{{ subsection.title_id }}" data-number="{{ subsection.title_number }}" {% if subsection.source %}class="with-subtitle"{% endif %}>
                                {{ subsection.title }}
                                {% include "territories_dashboard_lib/website/pages/indicators/components/anchor.html" with anchor=subsection.title_id only %}
                            </h3>
                            {% include "./components/source.html" with source=subsection.source %}
                            {% if subsection.unit_switch %}
                                {% include "territories_dashboard_lib/website/pages/indicators/components/unit_toggle.html" with indicator=subsection.unit_switch.indicator %}
                            {% endif %}
                        </div>
                        {% for component in subsection.components %}
                            {% include "./components/component.html" %}
                        {% endfor %}
                    </section>
                {% endfor %}
            </section>
            {% if not forloop.last %}<hr/>{% endif %}
        {% endfor %}
    </main>
{% endblock %}