{% include "assiduites/widgets/toast.j2" %}
<section id="content">

    <div class="no-display">
        <span class="formsemestre_id">{{formsemestre_id}}</span>
        <span id="formsemestre_date_debut">{{formsemestre_date_debut}}</span>
        <span id="formsemestre_date_fin">{{formsemestre_date_fin}}</span>
    </div>

    <h2>
        Saisie des assiduités {{gr_tit|safe}} {{sem}}
    </h2>

    {% if readonly == "true" %}
    <h1 style="font-weight: bolder;color:crimson">La page est en lecture seule.</h1>
    {% endif %}

    <fieldset class="selectors">
        <div>Groupes : {{grp|safe}}</div>


        <div class="infos">
            Date: <span id="datestr"></span>
            <input type="date" name="tl_date" id="tl_date" value="{{ date }}" onchange="updateDate()">
        </div>
    </fieldset>
    {% if readonly == "true" %}
    <button id="validate_selectors" onclick="validateSelectors(this)">
        Voir la saisie
    </button>
    {% else %}
    <button id="validate_selectors" onclick="validateSelectors(this)">
        Faire la saisie
    </button>
    {% endif %}

    {{timeline|safe}}



    {% if readonly == "false" %}
    <div style="margin: 1vh 0;">
        <div id="forcemodule" style="display: none; margin:10px 0px;">
            Vous devez spécifier le module ! (voir réglage préférence du semestre)
        </div>
        <div>Module :{{moduleimpl_select|safe}}</div>
    </div>
    {% else %}
    {% endif %}
    <div class="etud_holder">
        <p class="placeholder">
            Veillez à choisir le groupe concerné par la saisie ainsi que la date de la saisie.
            Après validation, il faudra recharger la page pour changer les informations de la saisie.
        </p>
    </div>
    <div class="legende">
        <h3>Explication diverses</h3>
        <p>
            Si la période indiquée par la timeline provoque un conflit d'assiduité pour un étudiant sa ligne deviendra
            rouge.
            <br>
            Dans ce cas il faut résoudre manuellement le conflit : cliquez sur un des boutons d'assiduités pour ouvrir
            le
            résolveur de conflit.
            <br>
            Correspondance des couleurs :
        </p>
        <ul>
            <li><span title="Vert" class="present demo"></span> &rightarrow; présence de l'étudiant lors de la période
            </li>
            <li><span title="Orange" class="retard demo"></span> &rightarrow; retard de l'étudiant lors de la période
            </li>
            <li><span title="Rouge" class="absent demo"></span> &rightarrow; absence de l'étudiant lors de la période
            </li>
            <li><span title="Hachure Bleue" class="justified demo"></span> &rightarrow; l'assiduité est justifiée par un
                justificatif valide</li>
            <li><span title="Hachure Rouge" class="invalid_justified demo"></span> &rightarrow; l'assiduité est
                justifiée par un justificatif non valide / en attente de validation
            </li>
        </ul>
    </div>
    <!-- Ajout d'un conteneur pour le loader -->
    <div class="loader-container" id="loaderContainer">
        <div class="loader"></div>
    </div>

    {% include "assiduites/widgets/alert.j2" %}
    {% include "assiduites/widgets/prompt.j2" %}
    {% include "assiduites/widgets/conflict.j2" %}

    <script>

        const nonWorkDays = [{{ nonworkdays| safe }}];

        const readOnly = {{ readonly }};


        updateDate();
        setupDate();
        setupTimeLine();

        window.forceModule = "{{ forcer_module }}"
        window.forceModule = window.forceModule == "True" ? true : false

        const etudsDefDem = {{ defdem  | safe }}

        if (window.forceModule) {
            const btn = document.getElementById("validate_selectors");

            const select = document.getElementById("moduleimpl_select");

            if (!readOnly && select.value == "") {
                document.getElementById('forcemodule').style.display = "block";
            }

            select?.addEventListener('change', (e) => {
                if (e.target.value != "") {
                    document.getElementById('forcemodule').style.display = "none";
                } else {
                    document.getElementById('forcemodule').style.display = "block";
                }
            });
        }

    </script>
</section>