{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% macro render_field(field, with_label=True) %}
<div>
    {%  if with_label %}
        <span class="wtf-field">{{ field.label }} :</span>
    {%  endif %}
    <span class="wtf-field">{{ field(**kwargs)|safe }}
        {% if field.errors %}
        <ul class=errors>
            {% for error in field.errors %}
            <li>{{ error }}</li>
            {% endfor %}
        </ul>
        {% endif %}
    </span>
</div>
{% endmacro %}

{% macro render_add_logo(add_logo_form) %}
    <div class="logo-add">
        <h3>Ajouter un logo</h3>
        {{ add_logo_form.hidden_tag() }}
        {{ render_field(add_logo_form.name) }}
        {{ render_field(add_logo_form.upload) }}
        {{ render_field(add_logo_form.do_insert, False, onSubmit="submit_form") }}
    </div>
{% endmacro %}

{% macro render_logo(dept_form, logo_form) %}
    <div class="logo-edit">
        {{ logo_form.hidden_tag() }}
        {% if logo_form.titre %}
            <tr class="logo-edit">
                <td colspan="3" class="titre">
                    <div class="nom"><h3>{{ logo_form.titre }}</h3></div>
                    <div class="description">{{ logo_form.description or "" }}</div>
                </td>
            </tr>
        {% else %}
            <tr class="logo-edit">
                <td colspan="3" class="titre">
                    <span class="nom"><h3>Logo personalisé: {{ logo_form.logo_id.data }}</h3></span>
                    <span class="description">{{ logo_form.description or "" }}</span>
                </td>
            </tr>
        {%  endif %}
        <tr>
            <td style="padding-right: 20px; ">
                <div class="img-container">
                    <img src="{{ logo_form.logo.get_url_small() }}" alt="pas de logo chargé" /></div>
            </td><td class="img-data">
                <h3>{{ logo_form.logo.logoname }} (Format: {{ logo_form.logo.suffix }})</h3>
                Taille: {{ logo_form.logo.size }} px
                {% if logo_form.logo.mm %} &nbsp; / &nbsp; {{ logo_form.logo.mm }} mm {%  endif %}<br/>
                Aspect ratio: {{ logo_form.logo.aspect_ratio }}<br/>
                Usage: <span style="font-family: system-ui">{{ logo_form.logo.get_usage() }}</span>
            </td><td class=""img-action">
                <p>Modifier l'image</p>
                <span class="wtf-field">{{  render_field(logo_form.upload, False, onchange="submit_form()") }}</span>
                {% if logo_form.can_delete %}
                    <p>Supprimer l'image</p>
                    {{ render_field(logo_form.do_delete, False, onSubmit="submit_form()") }}
                {% endif %}
            </td>
        </tr>
    </div>
{% endmacro %}

{% macro render_logos(dept_form) %}
    <table>
    {%  for logo_entry in dept_form.logos.entries %}
        {% set logo_form = logo_entry.form %}
        {{ render_logo(dept_form, logo_form) }}
    {% else %}
        <p class="logo-edit"><h3>Aucun logo défini en propre à ce département</h3></p>
    {% endfor %}
    </table>
{% endmacro %}

{% block app_content %}

<script src="/ScoDoc/static/jQuery/jquery.js"></script>
<script src="/ScoDoc/static/js/configuration.js"></script>

<form id="configuration_form" class="sco-form" action="" method="post" enctype="multipart/form-data" novalidate>
    {{ form.hidden_tag() }}

    <div class="configuration_logo">
        <h1>Configuration générale</h1>
            <div class="sco_help">Les paramètres donnés ici s'appliquent à tout ScoDoc (tous les départements):</div>
                {{ render_field(form.bonus_sport_func_name, onChange="submit_form()")}}

        <h1>Bibliothèque de logos</h1>
        {% for dept_entry in form.depts.entries %}
            {% set dept_form = dept_entry.form %}
            {{ dept_entry.form.hidden_tag() }}
            {% if dept_entry.form.is_local() %}
                <div class="departement">
                    <h2>Département {{ dept_form.dept_name.data }}</h2>
                        <h3>Logos locaux</h3>
                        <div class="sco_help">Les paramètres donnés sont spécifiques à ce département.<br/>
                        Les logos du département se substituent aux logos de même nom définis globalement:</div>
                </div>
            {% else %}
                <div class="departement">
                    <h2>Logos généraux</h2>
                    <div class="sco_help">Les images de cette section sont utilisé pour tous les départements,
                        mais peuvent être redéfinies localement au niveau de chaque département
                        (il suffit de définir un logo local de même nom)</div>
                </div>
            {% endif %}
            {{ render_logos(dept_form) }}
            {{ render_add_logo(dept_form.add_logo.form) }}
        {%  endfor %}
    </div>
</form>
{% endblock %}