{% extends 'base.html.twig' %}

{% block title %}Statistiques{% endblock %}

{% block body %}
    <main class="container text-center mt-5">

        <h1 class="h3 mb-3 font-weight-normal">Espace Secretariat</h1>
        <form method="post">
            {% if app.user %}
                <div class="mb-3">
                    Vous êtes authentifié en tant que {{ app.user.username }}, <a href="{{ path('app_logout') }}">Se déconnecter</a>
                </div>
            {% endif %}
        </form>
        <input class="btn btn-primary" id="FP" type="button" value="Feuille paroissiale">
        <input class="btn btn-primary" type="submit" value="Statistiques">
        <input class="btn btn-primary" type="reset" value="Agenda">
    </main>
    <style>
        .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
        .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }

    </style>

<div class="example-wrapper">
    {% for chart in charts %}
        {{ render_chart(chart, {'class': "my-chart"}) }}<br><br>
    {% endfor %}
</div>
<script>
    Array.from(document.getElementsByClassName("my-chart")).forEach(

        function(element, index, array) {
            element.style.backgroundColor="#D5FDFB";
        }
    );

</script>
{% endblock %}
