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

{% block styles %}
{{super()}}
<style>
.form-titre {
    font-weight: bold;
}
span.mod-label {
    display: inline-block;
    min-width: 300px;
}
#mf .mod-label label {
    display: inline-block;
    min-width: 100px;
}
.field-apo {
    display: inline-block;
    min-width: 300px;
}
.field-edt {
    display: inline-block;
    min-width: 200px;
}
#mf input {
    display: inline;
    width: auto;
}

</style>
{% endblock %}

{% macro render_text_field(field_apo, field_edt, codes_apo_module) %}
<div class="form-group">
    <span class="mod-label">
        {{ field_apo.label(class_="form-label") }}
        <span class="code-apo-module">{{codes_apo_module|join(", ") or ("<em>non défini</em>"|safe)}}</span>
    </span>
    <span class="field-apo">{{field_apo(class_="form-field")}}</span>
    <span class="field-edt">{{field_edt(class_="field-edt")}}</span>
    {%- for error in field_apo.errors %}
        <span class="form-error">{{ error }}</span>
    {% endfor %}
    {%- for error in field_edt.errors %}
        <span class="form-error">{{ error }}</span>
    {% endfor %}
</div>
{% endmacro %}


{% block app_content %}

<div class="tab-content">
<h2>Codes Apogée et emploi du temps des modules du semestre</h2>

<p class="help">Les codes élément Apogée sont utilisés pour les exports des
résultats et peuvent aussi l'être pour connecter l'emploi du temps. Si votre
logiciel d'emploi du temps utilise des codes différents, vous pouvez aussi
indiquer un code EDT spécifique.
</p>

<p class="help">Les codes Apogée modules rappelés à gauche sont ceux définis
dans la formation: il sont utilisés sauf si on spécifie un code ici.
Pour les modifier, aller dans l'édition de la formation.
</p>


<div class="row">
    <div class="col-md-8">
        <form id="mf" class="form form-horizontal" method="post" enctype="multipart/form-data" role="form">
            {{ form.hidden_tag() }}
            {{ wtf.form_errors(form, hiddens="only") }}
            <div class="form-group form-titre">
                <span class="mod-label">
                    <label>Module</label>
                    <span class="code-apo-module" title="codes dans la formation">Code Apo. Module</span>
                </span>
                <span class="field-apo"
                title="codes spécifiques à ce semestre (si différents de ceux de la formation)">
                Code(s) Apogée</span>
                <span class="field-edt"
                title="identifiant dans l'emploi du temps (si différent du code Apogée)">
                Code EDT</span>
            </div>
            {% for modimpl in formsemestre.modimpls_sorted %}
                {{ render_text_field(form["modimpl_apo_" ~ modimpl.id], form["modimpl_edt_" ~ modimpl.id], modimpl.module.get_codes_apogee()) }}
            {% endfor %}
            <div class="form-group">
                {{ wtf.form_field(form.submit) }}
                {{ wtf.form_field(form.cancel) }}
            </div>
        </form>
    </div>
</div>

</div>
{% endblock %}