{% extends 'up_squelette.html' %}


{% block main %}

<!--<div class="page-header">
<h1>Profil</h1>
</div>-->

<div class="row">

        <div class="col-sm-3"></div>
        <div class="col-sm-6">
            <div class="panel panel-primary">
                <div class="well">
                    <p> En créant un compte sur ce serveur vous disposez d'une adresse e-mail et XMPP que vous pouvez utiliser
                        avec un client mail et avec un client XMPP
                    </p>

                    <p> Voici un exemple de <a href="https://www.thunderbird.net/fr/">  client mail </a>
                        et <a href="https://gajim.org/">client XMPP </a> pour un ordinateur </p>

                    <p> Voici un exemple de <a href="https://k9mail.app/"> client mail </a> et  <a href="https://conversations.im/">client XMPP</a>
                        pour un téléphone sous Android </p>

                    <p> Voici un exemple de<a href="https://support.apple.com/fr-fr/mail"> client mail</a> et <a href="https://monal.im/"> client XMPP </a>sous iOS </p>

                    <p> Ton profil sert aux autres membres à te reconnaitre si tu met un post-it sur le <a href="/post-it/"> tableau des post-its </a> aucun champs n'est obligatoire,
                        tu mets simplement les informations dont tu as envie </p>
                </div>

          <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">Mon profil</h3>
            </div>
              <div class="panel-body">
                 <form method="POST" action="" enctype="multipart/form-data">
                     <div id="fic">
                         <label> Photo de profil </label>
                         <input type="file" name="fic" id="fic"/><br>
                         <img id="fic" src="/profil/{{ username }}/{{ profil['avatar'] }}" class="img-rounded" alt=""/>
                     </div>
                 <br>
                 <label>Nom </label>
                 <input type="text" name="nom" id="nom" value="{% if profil['nom'] != None %}{{ profil['nom'] }}{%endif%}" class="form-control"><br />
                 <label>Prenom </label>
                 <input type="text" name="prenom" id="prenom" value="{% if profil['nom'] != None %}{{ profil['prenom'] }}{%endif%}" class="form-control"><br />
                 <label> Age </label>
                 <input type="text" name="age" value="{% if profil['age'] != None %}{{ profil['age'] }}{%endif%}" class="form-control"><br />
                 <label> Mail de secours </label>
                 <input type="text" name="mail_rescue" id="mail_rescue" value="{% if profil['nom'] != None %}{{ profil['mail_rescue'] }}{%endif%}" class="form-control"><br />
                 <button id="tada" class="btn btn-default btn-primary" type="submit">Envoyer</button>
                 </form>
                 {# on affiche les messages d'erreur puis les messages de succes #}
                 {% for categorie in ['error', 'succes'] %}
                   {% with msgs = get_flashed_messages(category_filter=[categorie]) %}
                     {% if msgs %}
                       <div class="flashed {{ categorie }}">
                         {% for m in msgs %}
                           <p>{{ m|safe }}</p>
                         {% endfor %}
                       </div>
                     {% endif %}
                   {% endwith %}
                 {% endfor %}

              </div>
          </div>
        </div>
</div>

{% endblock %}