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

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

{% macro render_string_field(field, size=64) %}
<div>
    <span class="wtf-field">{{ field.label }} :</span>
    <span class="wtf-field">{{ field(size=size)|safe }}</span>
    {% for error in field.errors %}
        <span class="text-danger">{{ error }}</span>
    {% endfor %}
    {% if field.description %}
        <div class="field_descr">{{ field.description }}</div>
    {% endif %}
</div>
{% endmacro %}

{% macro render_textarea_field(field, cols=80, rows=12) %}
<div>
    <div class="wtf-field">{{ field.label }} :</div>
    <div class="wtf-field">{{ field(cols=cols, rows=rows)|safe }}</div>
    {% if field.description %}
        <div class="field_descr">{{ field.description }}</div>
    {% endif %}
</div>
{% endmacro %}

{% 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>Tous les champs sont optionnels.</p>
</div>

<form method="POST" enctype="multipart/form-data">
    {{ form.hidden_tag() }}

    <span class="wtf-field">{{ form.wip.label }}</span> <span class="wtf-field">{{form.wip() }}</span>
    <span class="field_descr">{{ form.wip.description }}</span>
    {{ render_string_field(form.date_debut_inscriptions, size=10) }}
    {{ render_string_field(form.date_fin_inscriptions, size=10) }}

    {{ render_textarea_field(form.description) }}
    {{ render_string_field(form.responsable) }}

    {{ form.photo_ens.label }}
    <div class="image">
        {% if formsemestre_description.photo_ens %}
            <img src="{{ url_for('apiweb.formsemestre_get_photo_ens',
                scodoc_dept=g.scodoc_dept,
                formsemestre_id=formsemestre.id) }}"
            alt="Current Image" style="max-width: 200px;">
            <div>
                Changer l'image: {{ form.photo_ens() }}
            </div>
        {% else %}
            <em>Aucune photo ou illustration chargée.</em>
             {{ form.photo_ens() }}
        {% endif %}
    </div>

    {{ render_string_field(form.campus) }}
    {{ render_string_field(form.salle, size=32) }}
    {{ render_string_field(form.horaire) }}

    <div>
        <span class="wtf-field">{{ form.dispositif.label }} :</span>
        <span class="wtf-field">{{ form.dispositif }}</span>
        {% if form.dispositif.description %}
            <div class="field_descr">{{ form.dispositif.description }}</div>
        {% endif %}
    </div>
    {{ render_string_field(form.public) }}
    {{ render_textarea_field(form.modalites_mcc, rows=8) }}
    {{ render_textarea_field(form.prerequis, rows=5) }}

    {{ 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: 400px;">
            <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 %}