{% extends "sco_page.j2" %}
{% block styles %}
{{super()}}

<style>
    #excel-content {
        margin: 4px 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        justify-content: space-evenly;
    }

    .hint {
        font-style: italic;
    }

    #excel-errors {
        background-color: rgb(241, 209, 209);
    }

    .stdlink {
        width: fit-content;
    }

    .star::after {
        content: "*";
        color: red;
    }
    .opt::after {
        content: "*";
        color: blue;
    }

    pre {
        width: fit-content;
    }
</style>

{% endblock styles %}

{% block app_content %}

<h1>Importation de l'assiduité depuis un fichier excel</h1>
<h2 style="color: crimson;">{{titre_form}}</h2>
<div class="scobox">
    <div id="excel-content">
        <p class="hint">Le fichier importé doit respecter le format suivant</p>

        <ul>
            <li>
                colonne A : Identifiant de l'étudiant
            </li>
            <li class="star">colonne B : Date de début</li>
            <li class="star">colonne C : Date de fin</li>
            <li class="opt">colonne D : État (ABS, RET, PRE), considéré ABSent si vide</li>
            <li class="opt">colonne E : code du module</li>
        </ul>

        <p class="hint"><span class="opt"></span> : Colonne optionnelle, les cases peuvent être vides</p>
        <p class="hint"><span class="star"></span> : Formats de dates autorisés :
        <ul>
            <li>
                <pre>aaaa-mm-jjThh:mm:ss</pre>
            </li>
            <li>
                <pre>jj/mm/aaaa hh:mm:ss</pre>
            </li>
        </ul>
        </p>

        <p class="hint">La première ligne du fichier <strong>ne doit pas</strong> être une ligne d'entête</p>


        <form action="" method="post" enctype="multipart/form-data">
            <label for="type_identifiant">Type d'identifiant d'étudiant (etudid, INE, NIP)</label>
            <select name="type_identifiant" id="type_identifiant">
                <option value="etudid">etudid</option>
                <option value="ine">INE</option>
                <option value="nip">NIP</option>
            </select>
            <div class="space-before-18">
                <label for="file">
                    Sélectionnez un fichier:

                </label>
                <input id="file" type="file" name="file"
                        accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
            </div>
            <div class="space-before-18">
                <button type="submit">Importer</button>
            </div>
        </form>
    </div>
</div>

{% if erreurs %}
<div class="scobox erreurs" id="excel-errors">
    <div>
        <p class="hint">Les erreurs suivantes ont été trouvées dans le fichier excel :</p>
        <ul>
            {% for erreur in erreurs %}
            <li>
                <span>
                    {{erreur[0]}}
                    &rightarrow;
                    Ligne : {{erreur[1][0]}}
                </span>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endif %}

{% endblock app_content %}