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

{% block styles %}
{{super()}}
<style>
.field_descr {
    font-style: italic;
    color: green;
}
.submit {
    margin-top: 32px;
    display: flex;
    justify-content: start;
    gap: 24px;
}
div.image {
    margin-left: 32px;
}
div.image img {
    border: 1px dashed #b60c0c;
}
</style>
{% endblock %}

{% block app_content %}

<div class="tab-content">
<h2>Édition de la description du semestre</h2>

<div class="help">
    <p>Les informations saisies ici ne sont pas utilisées par ScoDoc mais
    mises à disposition des applications tierces comme AutoSco.
    </p>
    <p>La description du semestre est un </p>
    <p>Il est possible d'ajouter une image pour illustrer le semestre.</p>
    <p>Le responsable est généralement l'enseignant en charge de la formation, ou
    la personne qui s'occupant de l'organisation du semestre.</p>
    <p>Tous les champs sont optionnels.</p>
</div>

<form method="POST" enctype="multipart/form-data">
    {{ form.hidden_tag() }}
    <div>
        {{ form.description.label }}<br>
        {{ form.description(cols=80, rows=8) }}
        <div class="field_descr">{{ form.description.description }}</div>
    </div>
    <div>
        {{ form.responsable.label }}<br>
        {{ form.responsable(size=64) }}<br>
        <div class="field_descr">{{ form.responsable.description }}</div>
    </div>
    <div>
        {{ form.lieu.label }}<br>
        {{ form.lieu(size=48) }}
        <div class="field_descr">{{ form.lieu.description }}</div>
    </div>
    <div>
        {{ form.horaire.label }}<br>
        {{ form.horaire(size=64) }}<br>
        <div class="field_descr">{{ form.horaire.description }}</div>
    </div>

    {{ form.image.label }}
    <div class="image">
        {% if formsemestre_description.image %}
            <img src="{{ url_for('apiweb.formsemestre_get_description_image',
            scodoc_dept=g.scodoc_dept,
            formsemestre_id=formsemestre.id) }}"
            alt="Current Image" style="max-width: 200px;">
            <div>
                Changer l'image: {{ form.image() }}
            </div>
        {% else %}
            <em>Aucune image n'est actuellement associée à ce semestre.</em>
             {{ form.image() }}
        {% endif %}

    </div>
    <div class="submit">
        {{ form.submit }} {{ form.cancel }}
    </div>
</form>


</div>
{% endblock %}