{% include "assiduites/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>

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

        <div>Modules :{{moduleimpl_select|safe}}</div>

        <div class="infos">
            Date: <span id="datestr"></span>
            <input type="date" name="tl_date" id="tl_date" value="{{ date }}" onchange="updateDate()">
        </div>

        <button id="validate_selectors" onclick="validateSelectors()">
            Valider
        </button>
    </fieldset>

    {{timeline|safe}}

    <div class="etud_holder">
    </div>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Veuillez régler le conflit pour poursuivre</h2>
            <!-- Ajout de la frise chronologique -->
            <div class="modal-timeline">
                <div class="time-labels"></div>
                <div class="assiduites-container"></div>
            </div>

            <div class="action-buttons">
                <button id="delete" class="btnPrompt" disabled>Supprimer</button>
                <button id="split" class="btnPrompt" disabled>Séparer</button>
                <button id="edit" class="btnPrompt" disabled>Modifier</button>
            </div>
        </div>

        <div class="modal-assiduite-content">
            <h2>Information de l'assiduité sélectionnée</h2>
            <div class="infos">
                <p>Assiduite id : <span id="modal-assiduite-id">A</span></p>
                <p>Etat : <span id="modal-assiduite-etat">B</span></p>
                <p>Date de début : <span id="modal-assiduite-deb">C</span></p>
                <p>Date de fin: <span id="modal-assiduite-fin">D</span></p>
                <p>Module : <span id="modal-assiduite-module">E</span></p>
                <p><span id="modal-assiduite-user">F</span></p>
            </div>
        </div>
    </div>
    <!-- Ajout d'un conteneur pour le loader -->
    <div class="loader-container" id="loaderContainer">
        <div class="loader"></div>
    </div>

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

    <script>
        const nonWorkDays = [{{ nonworkdays| safe }}];

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

        let forceModule = "{{ forcer_module }}"
        forceModule = forceModule == "True" ? true : false
    </script>
</section>