{# -*- mode: jinja-html -*- #}
<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>
{% include "assiduites/toast.j2" %}
{% include "assiduites/alert.j2" %}
{% include "assiduites/prompt.j2" %}
<div id="page-assiduite-content">
    {% block content %}
    <h2>Signalement de l'assiduité de <span class="rouge">{{sco.etud.nomprenom}}</span></h2>

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

    {{timeline|safe}}


    <div>
        {% include "assiduites/moduleimpl_dynamic_selector.j2" %}
        <button class="btn" onclick="fastJustify(getCurrentAssiduite(etudid))" id="justif-rapide">Justifier</button>
    </div>

    <div class="btn_group">
        <button class="btn" onclick="setTimeLineTimes({{morning}},{{afternoon}})">Journée</button>
        <button class="btn" onclick="setTimeLineTimes({{morning}},{{lunch}})">Matin</button>
        <button class="btn" onclick="setTimeLineTimes({{lunch}},{{afternoon}})">Après-midi</button>
    </div>

    <div class="etud_holder">
        <div id="etud_row_{{sco.etud.id}}">
            <div class="index"></div>
        </div>
    </div>


    <!-- Ajout d'un conteneur pour le loader -->
    <div class="loader-container" id="loaderContainer">
        <div class="loader"></div>
    </div>



    <script>
        const etudid = {{ sco.etud.id }};
        setupDate(() => {
            actualizeEtud(etudid);
            updateSelect()
        });

        setupTimeLine(() => {
            updateJustifyBtn();
        });

        updateDate();

        getSingleEtud({{ sco.etud.id }});
        actualizeEtud({{ sco.etud.id }});
        updateSelect()

        updateJustifyBtn();


        function setTimeLineTimes(a, b) {
            setPeriodValues(a, b);
            updateJustifyBtn();

        }

        let forceModule = "{{ forcer_module }}"
        forceModule = forceModule == "True" ? true : false

    </script>


    <style>
        .justifie {
            background-color: rgb(104, 104, 252);
            color: whitesmoke;
        }
    </style>

    {% endblock %}

</div>