{# Ajout d'une "assiduité" sur un étudiant #}

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


{% block styles %}
    {{super()}}
    <link rel="stylesheet" href="{{scu.STATIC_DIR}}/libjs/timepicker-1.3.5/jquery.timepicker.min.css"/>
    <link rel="stylesheet" href="{{scu.STATIC_DIR}}/css/assiduites.css">
{% endblock %}

{% block app_content %}
<style>
form#ajout-assiduite-etud {
    margin-bottom: 24px;
}
form#ajout-assiduite-etud > div {
    margin-bottom: 16px;
}
/* Target the container of the radio buttons */
div.radio-assi_etat {
    font-size: 120%;
}
div.radio-assi_etat ul {
    list-style-type: none; /* Remove bullets */
    display: inline-block;
    margin-right: 16px;
}

/* Style each radio button and label */
div.radio-assi_etat ul li {
    display: inline-block; /* Display radio buttons inline */
    margin-right: 16px; /* Space between each radio button */
}
div.radio-assi_etat input[type="radio"] + label {
    font-weight: normal;
}

div.radio-assi_etat input[type="radio"]:checked + label {
    /* Style for checked state */
    font-weight: bold;
}

div.submit {
    margin-top: 12px;
}
div.submit > input {
    margin-right: 16px;
}
</style>

<div class="tab-content">
    <h2>Signaler une absence, retard ou présence pour {{etud.html_link_fiche()|safe}}</h2>

    {% if form.error_message %}
        <div class="wtf-error-messages">
            {{ form.error_message }}
        </div>
    {% endif %}

    <form id="ajout-assiduite-etud" method="post">
        {{ form.hidden_tag() }}
        {# Type d'évènement #}
        <div class="radio-assi_etat">
            {{ form.assi_etat.label }}
            {{ form.assi_etat() }}
        </div>
        {# Dates et heures #}
        <div class="dates-heures">
            {{ form.date_debut.label }}&nbsp;: {{ form.date_debut }}
            de {{ form.heure_debut }} à {{ form.heure_fin }}
            <span class="help">laisser les heures vides pour signaler la journée entière</span>
            {{ render_field_errors(form, 'date_debut') }}
            {{ render_field_errors(form, 'heure_debut') }}
            {{ render_field_errors(form, 'heure_fin') }}

            <div>
                {{ form.date_fin.label }}&nbsp;: {{ form.date_fin }}
                <span class="help">si le jour de fin est différent,
                les heures seront ignorées (journées complètes)</span>
                {{ render_field_errors(form, 'date_fin') }}
            </div>
        </div>
        {# Menu module #}
        <div class="select-module">
            {{ form.modimpl.label }}&nbsp;:
            {{ form.modimpl }}
            {{ render_field_errors(form, 'modimpl') }}
        </div>
        {# Raison #}
        <div>
            <div>{{ form.assi_raison.label }}</div>
            {{ form.assi_raison() }}
            {{ render_field_errors(form, 'assi_raison') }}
        </div>
        {# Date dépot #}
        {{ form.entry_date.label }}&nbsp;: {{ form.entry_date }}
        <span class="help">laisser vide pour date courante</span>
        {{ render_field_errors(form, 'entry_date') }}
        {# Submit #}
        <div class="submit">
        {{ form.submit }} {{ form.cancel }}
        </div>
    </form>

    <section class="assi-liste">
        {{tableau | safe }}
    </section>

</div>

{% endblock app_content %}

{% block scripts %}
{{ super() }}
<script src="{{scu.STATIC_DIR}}/libjs/timepicker-1.3.5/jquery.timepicker.min.js"></script>
<script src="{{scu.STATIC_DIR}}/js/assiduites.js"></script>
<script src="{{scu.STATIC_DIR}}/js/etud_info.js"></script>
<script>
$('.timepicker').timepicker({
    timeFormat: 'HH:mm',
    interval: {{ scu.get_assiduites_time_config("assi_tick_time") }},
    minTime: "{{ scu.get_assiduites_time_config("assi_morning_time") }}",
    maxTime: "{{ scu.get_assiduites_time_config("assi_afternoon_time") }}",
    startTime: "{{ scu.get_assiduites_time_config("assi_morning_time") }}",
    dynamic: false,
    dropdown: true,
    scrollbar: false
});
</script>
{% endblock scripts %}