{% extends 'layout/content.html.twig' %}

{% block title %}{% endblock %}

{% block stylesheets %}
    {{ encore_entry_link_tags('project-dashboard') }}
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('project-dashboard') }}
{% endblock %}

{% block breadcrumb %}
    {{ render(controller('App\\Controller\\SharedController::getBreadcrumb', {type: 'project', id: project.id })) }}
{% endblock %}

{% set hasSidebar = true %}
{% set showSidebar = false %}
{% block sidebar %}
    {{ render(controller('App\\Controller\\SharedController::getProjectSideBarMenu', {acronym: project.acronym, step: step})) }}
{% endblock %}

{% block content %}
    <div class="card rounded-4 shadow-sm mb-1">
        {% include 'project/partials/_project_card_header.html.twig' %}
    </div>

    <div id="scrollRoot"
         data-bs-spy="scroll"
         data-bs-target="#dashboardNav"
         data-bs-offset="80"
         data-bs-smooth-scroll="true"
         class="position-relative"
         tabindex="0">

        <div id="chartsData"
             data-app-activities-budget-chart="{{ componentBudgetBarData }}"
             data-app-component-weighting-doughnut-chart="{{ componentWeightingDoughnutData }}">
        </div>
        {% include 'project/dashboard/_section_exec.html.twig' %}
        {% include 'project/dashboard/_section_actus.html.twig' %}
        {% include 'project/dashboard/_section_budget.html.twig' %}
        {% include 'project/dashboard/_section_risks.html.twig' %}
        {% include 'project/dashboard/_section_issues.html.twig' %}
        {% include 'project/dashboard/_section_next.html.twig' %}
        {% include 'project/dashboard/_section_results.html.twig' %}
    </div>

    <div class="action-bar d-flex justify-content-around align-items-center">
        {# project_action_buttons(project) #}
        <nav id="dashboardNav" class="shadow-sm rounded p-0 mb-0">
            <ul class="nav nav-pills small gap-2 flex-wrap">
                <li class="nav-item"><a class="nav-link active" href="#rb-exec">Vue d’ensemble</a></li>
                <li class="nav-item"><a class="nav-link" href="#rb-actus">Actualités</a></li>
                <li class="nav-item"><a class="nav-link" href="#rb-budget">Budget</a></li>
                <li class="nav-item"><a class="nav-link" href="#rb-risks">Risques</a></li>
                <li class="nav-item"><a class="nav-link" href="#rb-issues">Problèmes</a></li>
                <li class="nav-item"><a class="nav-link" href="#rb-next">Next steps</a></li>
                <li class="nav-item"><a class="nav-link" href="#rb-results">Résultats</a></li>
                <!-- li class="nav-item"><a class="nav-link" href="#rb-gov">Gouvernance</a></li-->
            </ul>
        </nav>
    </div>

    {% include 'output/_modal_map_form.html.twig' %}
    
{% endblock %}