{% extends "sco_page.j2" %}

{% block scripts %}
    {{ super() }}
    <script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
{% endblock %}

{% block app_content %}

<h2>Visualisation de l'assiduité {{gr_tit|safe}}</h2>

<div class="stats-inputs">
    <label class="stats-label"> Date de début <input type="date" name="stats_date_debut" id="stats_date_debut"
            value="{{date_debut}}"></label>
    <label class="stats-label"> Date de fin <input type="date" name="stats_date_fin" id="stats_date_fin"
            value="{{date_fin}}"></label>
    <button onclick="stats()">Changer</button>

    <a style="margin-left:32px;" href="{{request.url}}&format=xlsx">{{scu.ICON_XLS|safe}}</a>
</div>

{{tableau | safe}}

<div class=""help">
Les comptes sont exprimés en {{ assi_metric }}.
</div>

<script>
    const date_debut = "{{date_debut}}";
    const date_fin = "{{date_fin}}";
    const group_ids = "{{group_ids}}";

    function stats() {
        const deb = document.querySelector('#stats_date_debut').value;
        const fin = document.querySelector('#stats_date_fin').value;
        location.href = `VisualisationAssiduitesGroupe?group_ids=${group_ids}&date_debut=${deb}&date_fin=${fin}`;
    }

    window.addEventListener('load', () => {
        document.querySelector('#stats_date_debut').value = date_debut;
        document.querySelector('#stats_date_fin').value = date_fin;
    })

</script>

{% endblock %}