{% if demandes is not empty %}
    {% set total = demandes|length %}
    {% set rejete = rejeter|length / total *100 %}
    {% set clouture = cloturer|length / total *100 %}
    {% set menace = menacer|length / total *100 %}
    {% set encour =  total - (rejeter|length + cloturer|length + menacer|length) %}
    {% set encours = 100- (rejete+clouture+menace) %}
{% else %}
    {% set rejete = 0 %}
    {% set clouture = 0 %}
    {% set menace = 0 %}
    {% set encour = 0 %}
    {% set encours = 0 %}
{% endif %}
<!-- start: DASHBOARD TITLE -->
<section id="page-title" class="padding-top-15 padding-bottom-15">
    <div class="row">
        <div class="col-sm-7">
            <p class="titleDashboard">{{ 'dashboard.title'|trans }}</p>
            <span class="mainDescription">{{ 'dashboard.responsable'|trans }} {{ site }}</span>
        </div>
        <div class="col-sm-5">
            <!-- start: MINI STATS WITH SPARKLINE -->
            <ul class="mini-stats pull-right">
                <li>
                    <div class="sparkline-1">
                        <span><i class="fa fa-bar-chart agents-char" aria-hidden="true"></i></span>
                    </div>
                    <div class="values">
                        <strong class="text-dark">{{ agents|length }}</strong>
                        <p class="text-small no-margin">{{ 'dashboard.directions'|trans }}</p>
                    </div>
                </li>
                <li>
                    <div class="sparkline-2">
                        <span><i class="fa fa-bar-chart demandes-char" aria-hidden="true"></i></span>
                    </div>
                    <div class="values">
                        <strong class="text-dark">{{ demandes|length }}</strong>
                        <p class="text-small no-margin">{{ 'dashboard.demandes'|trans }}</p>
                    </div>
                </li>
            </ul>
            <!-- end: MINI STATS WITH SPARKLINE -->
        </div>
    </div>
    <!-- end: DASHBOARD TITLE -->
    <!-- start: FEATURED BOX LINKS -->
    <div class="container div-statique-1">
        <div class="">
            <div class="col-sm-12 col-md-3">
                <div class="panel panel-white no-radius text-center">
                    <div class="panel-body">
                        <span class="progress-left"><span class="progress-bar"></span></span>
                        <div class="progress-circle progress-{{ encours|round }}-encour">
                            <span class="count">{{ encours|round }}</span></div>
                        <h2 class="StepTitle">{{ 'dashboard.encours'|trans }}</h2>
                        <nav id="cl-effect-14" class="links cl-effect-14">
                            <a href="">{{ encour }}</a>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-3">
                <div class="panel panel-white no-radius text-center">
                    <div class="panel-body">
                        <div class="progress-circle progress-{{ rejete|round }}-rejeter">
                            <span class="count">{{ rejete|round}}</span></div>
                        <h2 class="StepTitle">{{ 'dashboard.rejete'|trans }}</h2>
                        <nav id="cl-effect-14a" class="links cl-effect-14a">
                            <a href="">{{ rejeter|length }}</a>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-3">
                <div class="panel panel-white no-radius text-center">
                    <div class="panel-body">
                        <div class="progress-circle progress-{{ clouture|round }}-cloturer">
                            <span class="count">{{ clouture|round }}</span></div>
                        <h2 class="StepTitle">{{ 'dashboard.cloture'|trans }}</h2>
                        <nav id="cl-effect-14b" class="links cl-effect-14b">
                            <a href="">{{ cloturer|length }}</a>
                        </nav>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-3">
                <div class="panel panel-white no-radius text-center">
                    <div class="panel-body">
                        <div class="progress-circle progress-{{ menace|round }}-menacer">
                            <span class="count">{{ menace|round }}</span></div>
                        <h2 class="StepTitle">{{ 'dashboard.menace'|trans }}</h2>
                        <nav id="cl-effect-14c" class="links cl-effect-14c">
                            <a href="">{{ menacer|length }}</a>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="margin:30px">
        <div class="col-sm-12 dashboard-block white-block">
            <canvas id="line-chart" class="full-width" height="70"></canvas>
        </div>
    </div>
    <!-- end: FEATURED BOX LINKS -->
    <div class="container margin-top-50">
        <div class="col-md-6">
            <!-- start: DYNAMIC TABLE -->
            <div class="panel panel-white no-radius">
                <div class="panel-heading border-bottom">
                    <h3 class="over-title">{{ 'dashboard.block11'|trans }}
                        <span class="text-bold" style="color:#df0037"> {{ 'dashboard.block12'|trans }}</span>
                    </h3>
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-hover sample_2">
                        <thead>
                        <tr>
                            <th>{{ 'dashboard.b11'|trans }}</th>
                            <th>{{ 'dashboard.b12'|trans }}</th>
                            <th>E-mail</th>
                            <th>Direction</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for agent in agents %}
                            <tr data-path="{{ path('statistique_agent',{'id':agent.id}) }}"
                                class="agent-details"
                                data-id="{{ agent.id }}">
                                <td>{{ agent.civility }}</td>
                                <td>{{ agent }}</td>
                                <td>{{ agent.email }}</td>
                                <td>{{ agent.site }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="panel-heading border-bottom">
                    <h3 class="over-title margin-top-50">{{ 'dashboard.block31'|trans }}
                        <span class="text-bold" style="color:#df0037"> {{ 'dashboard.block32'|trans }}</span>
                    </h3>
                </div>
                <div class="panel-body">
                    <div class="col-sm-12">
                        <div class="text-center margin-bottom-15">
                            <canvas id="bar-chart-horizontal" class="full-width" height="70"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- end: DYNAMIC TABLE -->

    <div class="col-md-6">
        <div class="agent-specifique bg-white">
            {% if agents is not empty %}
                {% set a = agents|first %}
                {{ render(controller('StatistiqueBundle:Direction:demandesByAgent',{'id':a.id})) }}
            {% else %}
                <div class="panel panel-white no-radius">
                    <div class="panel-heading border-bottom">
                        <h3 class="over-title">{{ 'dashboard.block21'|trans }}
                            <span class="text-bold" style="color:#df0037">{{ 'dashboard.block22'|trans }}</span>
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div class="no-data">
                            <p class="no-data-description">{{ 'dashboard.b26'|trans }} <span
                                        class="fa fa-frown-o"></span></p>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
    </div>
</section>
{% include "@Statistique/Direction/bibliotheque.html.twig" %}