{% extends "base.j2" %}
{% import 'wtf.j2' as wtf %}

{% block styles %}
{{super()}}
<style>
div.config-section {
    font-weight: bold;
    font-size: 18px;
    margin-right: -15px;
    margin-left: -15px;
}

#zone-test {
    margin-bottom: 12px;
}
#raw-ics-sample-zone {
    display: none;
}
#raw-ics-sample-zone>div {
    font-style: italic;
}
#test_load_ics:disabled {
    background-color: gray;
    color: white; /* Optional: change text color if needed */
    cursor: not-allowed;
}
</style>
{% endblock styles %}


{% block scripts %}
{{ super() }}

<script>
function update_test_button_state() {
    var inputValue = document.getElementById('test_edt_id').value;
    document.getElementById('test_load_ics').disabled = inputValue.length === 0;
}

async function load_ics_sample() {
    var edt_id = document.getElementById('test_edt_id').value;
    try {
        const response = await fetch(`${SCO_URL}/../ics_raw_sample/${edt_id}`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.text();
        document.getElementById('raw-ics-sample').value = data;
        document.getElementById('raw-ics-sample-zone').style.display = 'block';
    } catch (error) {
        console.error('Error fetching data: ', error);
    }
}
</script>
{% endblock scripts %}

{% block app_content %}
<div class="row">

<h1>Configuration du suivi de l'assiduité</h1>

<div class="help">
<p>Ces paramètres seront utilisés par tous les départements et
affectent notamment les comptages d'absences de tous les bulletins des
étudiants&nbsp;: ne changer que lorsque c'est vraiment nécessaire.
</p>
<p>
Les heures de ScoDoc sont exprimées en <em>heures locale du serveur</em>,
c'est à dire à la montre des étudiants.
</p>
</div>

</div>

<form class="form form-horizontal" method="post" enctype="multipart/form-data" role="form">
    <div class="row">
        <div class="col-md-8">
                {{ form.hidden_tag() }}
                {{ wtf.form_errors(form, hiddens="only") }}

                {{ wtf.form_field(form.morning_time) }}
                {{ wtf.form_field(form.lunch_time) }}
                {{ wtf.form_field(form.afternoon_time) }}
                {{ wtf.form_field(form.tick_time) }}
        </div>
    </div>
    <div class="row">
        <h1>Emplois du temps</h1>
        <div class="help">ScoDoc peut récupérer les emplois du temps de chaque session.
        Voir <a href="https://scodoc.org/EmploisDuTemps" class="stdlink"
            target="_blank">la documentation</a>.
        </div>
        <div class="col-md-8">
                <div class="config-edt">
                    {{ wtf.form_field(form.edt_ics_path) }}
                </div>

                <div id="zone-test">
                    Pour essayer, indiquer un <tt>edt_id</tt> :
                    <input type="text" id="test_edt_id" oninput="update_test_button_state()" size="12" />
                    <button id="test_load_ics" type="button" onclick="load_ics_sample()" disabled>
                    Essayer de charger l'ics</button>
                    <div id="raw-ics-sample-zone">
                        <div>Voici un évènement chargé, pris au hasard au milieu de ce calendrier.
                        Utilisez cet exemple pour configurer les expressions d'extraction
                        en bas de ce formulaire.
                        </div>
                        <textarea id="raw-ics-sample" rows="13" cols="90">
                        </textarea>
                    </div>
                </div>
                <div class="config-section">Extraction des identifiants depuis les calendriers</div>
                <div class="help">
                Indiquer ici comment récupérer les informations (titre, groupe, module)
                dans les calendriers publiés par votre logiciel d'emploi du temps.
                </div>
                <div class="config-edt">
                    {{ wtf.form_field(form.edt_ics_title_field) }}
                    {{ wtf.form_field(form.edt_ics_title_regexp) }}
                </div>
                <div class="config-edt">
                    {{ wtf.form_field(form.edt_ics_group_field) }}
                    {{ wtf.form_field(form.edt_ics_group_regexp) }}
                </div>
                <div class="config-edt">
                    {{ wtf.form_field(form.edt_ics_mod_field) }}
                    {{ wtf.form_field(form.edt_ics_mod_regexp) }}
                </div>
                <div class="config-edt">
                    {{ wtf.form_field(form.edt_ics_uid_field) }}
                    {{ wtf.form_field(form.edt_ics_uid_regexp) }}
                </div>

                <div class="form-group">
                    {{ wtf.form_field(form.submit) }}
                    {{ wtf.form_field(form.cancel) }}
                </div>
        </div>
    </div>
</form>

{% endblock %}