{# -*- mode: jinja-html -*- #}
{% include "assiduites/widgets/toast.j2" %}
{% include "assiduites/widgets/alert.j2" %}
{% include "assiduites/widgets/prompt.j2" %}
{% include "assiduites/widgets/conflict.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 }}">
    </div>

    {{timeline|safe}}


    <div>
        {{moduleimpl_select | safe }}
        <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>
    <hr>

    {% if saisie_eval %}
    <div id="saisie_eval">
        <br>
        <h3>
            La saisie de l'assiduité a été préconfigurée en fonction de l'évaluation. <br>
            Une fois la saisie finie, cliquez sur le lien si dessous pour revenir sur la gestion de l'évaluation
        </h3>
        <a href="{{redirect_url}}">retourner sur la page de l'évaluation</a>
    </div>
    {% endif %}

    {{diff | safe}}

    <div class="legende">
        <h3>Explication de la timeline</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>
        <p>Vous pouvez justifier rapidement une assiduité en saisisant l'assiduité puis en appuyant sur "Justifier"</p>

        <h3>Explication de la saisie différée</h3>
        <p>Si la colonne n'est pas valide elle sera affichée en rouge, passez votre curseur sur la colonne pour afficher
            le message d'erreur</p>
        <p>Sélectionner la date de début de la colonne mettra automatiquement la date de fin à la durée d'une séance
            (préférence de département)</p>
        <p>Modifier le module alors que des assiduités sont déjà enregistrées pour la période changera leur
            module.</p>
        <p>Il y a 4 boutons d'assiduités sur la colonne permettant de mettre l'assiduités à tous les étudiants</p>
        <p>Le dernier des boutons retire l'assiduité.</p>
        <p>Vous pouvez ajouter des colonnes en appuyant sur le bouton + </p>
        <p>Vous pouvez supprimer une colonne en appuyant sur la croix qui se situe dans le coin haut droit de la colonne
        </p>
    </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 }};
        const nonWorkDays = [{{ nonworkdays| safe }}];

        setupDate(() => {
            if (updateDate()) {
                actualizeEtud(etudid);
                updateSelect();
                onlyAbs();
            }
        });


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

        updateDate();

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

        updateJustifyBtn();


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

        }

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

        const date_deb = "{{date_deb}}";
        const date_fin = "{{date_fin}}";

        {% if saisie_eval %}
        createColumn(
            date_deb,
            date_fin,
            {{ moduleimpl_id }}
        );
        window.location.href = "#saisie_eval"
        getAndUpdateCol(1)
        {% else %}
        createColumn();
        {% endif %}

    </script>


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

        fieldset {
            outline: none;
            border: none;
        }
    </style>

    {% endblock %}

</div>