{% extends "sco_page.j2" %}

{% block title %}
    {{title}}
{% endblock title %}


{% block scripts %}
    {{ super() }}
    <script src="{{scu.STATIC_DIR}}/libjs/bootstrap-multiselect-1.1.2/bootstrap-multiselect.min.js"></script>
    <script src="{{scu.STATIC_DIR}}/libjs/purl.js"></script>
    <script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
    <script src="{{scu.STATIC_DIR}}/js/groups_view.js"></script>
    <script src="{{scu.STATIC_DIR}}/js/date_utils.js"></script>
    <script src="{{scu.STATIC_DIR}}/js/assiduites.js"></script>

    <script>

    {% if readonly != "false" %}
    function getPeriodValues(){
        return [0, 23]
    }
    {% endif %}


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

    const readOnly = {{ readonly }};


    setupDate();
    updateDate();
    if (!readOnly){
        setupTimeLine(()=>{
                generateAllEtudRow();
        });
    }

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

    const etudsDefDem = {{ defdem  | safe }}

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

    select?.addEventListener('change', (e) => {
        generateAllEtudRow();
    });

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


        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>
{% endblock scripts %}

{% block styles %}
    {{ super() }}
    <link rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/bootstrap/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/bootstrap-multiselect-1.1.2/bootstrap-multiselect.min.css">
    <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
    <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/minitimeline.css">
{% endblock styles %}


{% block app_content %}
{% include "assiduites/widgets/toast.j2" %}

{{ minitimeline|safe }}

<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>
        {% if readonly == "true" %}
        Assiduité {{gr_tit|safe}} {{sem}} (lecture seule)
        {% else %}
        Saisie de l'assiduité {{gr_tit|safe}} {{sem}}
        {% endif %}
    </h2>

    <fieldset class="selectors">
        <div class="infos">
            <div class="infos-button">Groupes&nbsp;: {{grp|safe}}</div>
            <div class="infos-button" style="margin-left: 24px;">Date&nbsp;: <span style="margin-left: 8px;"
                    id="datestr"></span>
                <input type="text" name="tl_date" id="tl_date" value="{{ date }}"
                    onchange="updateDate()">
            </div>
        </div>
    </fieldset>

    {% if readonly == "false" %}
    {{timeline|safe}}

    <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&nbsp;: {{moduleimpl_select|safe}}</div>
    </div>
    {% else %}
    {% endif %}

    {% if readonly == "true" %}
    <button id="validate_selectors" onclick="validateSelectors(this)">
        Voir l'assiduité
    </button>
    {% else %}
    <button id="validate_selectors" onclick="validateSelectors(this)">
        Faire la saisie
    </button>
    {% endif %}


    <div class="etud_holder">
        <p class="placeholder">
        </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>
            {% include "assiduites/widgets/legende_couleur.j2" %}
        </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" %}

</section>

{% endblock app_content %}