{% extends "sco_page.j2" %}

{% block styles %}
{{super()}}
<style>
.h-spaced {
    margin-left: 32px;
}
</style>
{% endblock %}

{% block app_content %}
<h2 class="formsemestre">{{title_h2}}</h2>

<div>{{table.get_nb_rows()}}
    {% if only_modifs %}modifications{% else %}saisies{% endif %}
    de notes dans ce semestre.
</div>
<form id="filter-form">
    <label>
        <input type="checkbox" id="only-modifs-checkbox" name="only_modifs" value="1"
        {% if only_modifs %}checked{% endif %}>
        Lister uniquement les modifications
    </label>

    <label class="h-spaced" for="user-select">Restreindre à un enseignant&nbsp;:</label>
    <select id="user-select" name="user_name">
        <option value="">Choisir...</option>
        {% for user in intervenants %}
            <option value="{{ user.user_name }}"
            {% if user.user_name == user_name %}selected{% endif %}>
                {{ user.get_nomplogin() }}
            </option>
        {% endfor %}
    </select>

    <span class="h-spaced">{{table.xls_export_button()|safe}} excel</span>
</form>

{{table.html()|safe}}


{% endblock %}

{% block scripts %}
{{super()}}

<script>
    document.getElementById('only-modifs-checkbox').addEventListener('change', function() {
        var form = document.getElementById('filter-form');
        var onlyModifs = this.checked ? '1' : '0';

        var url = new URL(window.location.href);
        url.searchParams.set('formsemestre_id', {{formsemestre_id}});
        url.searchParams.set('only_modifs', onlyModifs);

        window.location.href = url.toString();
    });

    document.getElementById('user-select').addEventListener('change', function() {
        var form = document.getElementById('filter-form');
        var userName = this.value;

        var url = new URL(window.location.href);
        url.searchParams.set('formsemestre_id', {{formsemestre_id}});
        url.searchParams.set('user_name', userName);

        window.location.href = url.toString();
    });
</script>
{% endblock %}