{% extends "main.html" %}

{% block title %}{{ nom }}{% endblock %}
{% load static %}
{% load imagekit %}
{% block content %}
<div class="default-container">
    {% block more %}{% endblock %}

    {% if avertissement == 1 %}
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        Nous vous rappelons que tous les services INP-net sont à usage non commercial, légal, et conforme aux bonnes mœurs.<br>
        (note: si vous utilisez l'annuaire à des fins de recrutement, même pour « rendre service », c'est un usage abusif)
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
            </button>
    </div>
    {% endif %}
    {% if avertissement == 2 %}
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        Nous vous rappelons que tous les services INP-net sont à usage non commercial, légal, et conforme aux bonnes mœurs.<br>
        <strong>Votre activité a été détectée comme suspecte et l'abus a été reporté aux administrateurs.</strong><br>
        Envoyez un mail à « <a href="mailto:inp-net@bde.inp-toulouse.fr">inp-net@bde.inp-toulouse.fr</a> pour justifier tout usage
        légitime de l'annuaire et prévenir les sanctions appliquées aux usages abusifs de l'annuaire.<br>
        (note: si vous utilisez l'annuaire à des fins de recrutement, même pour « rendre service », c'est un usage abusif)
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
            </button>
    </div>
    {% endif %}
    {% if avertissement == 3 %}
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        L'accès à l'annuaire peut vous être enlevé si vous effectuez trop de requètes.<br>
        Nous vous rappelons que tous les services INP-net sont à usage non commercial, légal, et conforme aux bonnes mœurs.</br>
        (note: si vous utilisez l'annuaire à des fins de recrutement, même pour « rendre service », c'est un usage abusif).
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
            </button>
    </div>
    {% endif %}
    {% if avertissement == 4 %}
    <div class="alert alert-warning alert-dismissible fade show" role="alert">
        Certaines informations ne vous sont plus accessible.<br>
        <strong>Votre activité a été détectée comme suspecte et l'abus a été reporté aux administrateurs.</strong><br>
        Envoyez un mail à « <a href="mailto:inp-net@bde.inp-toulouse.fr">inp-net@bde.inp-toulouse.fr</a> pour justifier tout usage
        légitime de l'annuaire et prévenir les sanctions appliquées aux usages abusifs de l'annuaire.<br>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
        </button>
    </div>
    {% endif %}


    <div class="row">
        <div class="p-3" style="display:flex">
            <h1> <img src="{% url 'annuaire:photo' uid %}" alt="Photo de {{ nom }}" class="rounded-lg"
                    style="object-fit:cover; align-self: flex-start;">
                <span style="flex: 1 1 auto"> {{ nom }}</span>
               <!-- <a class="float-right ml-5" href="{% url 'annuaire:vcard_uid' uid %}"><img
                        src="{% static "annuaire/vcard.png" %}" alt="vCard" title="Télécharger la vCard" /></a> -->
            </h1>
        </div>
    </div>
    <div class="row pt-2">
        <div class="col-md">
            <fieldset class="card mb-3">
                <h3 class="card-header text-center" style="font-size:1.3rem; font-weight:bold; color:#505050;">
                       Informations
                </h3>
                    <div class="card-body">
                    <table style="margin-left: auto; margin-right: auto;" class="mb-2">
                      {% for champ in champs.values %}
                        {% if 'Mail' not in champ.nom and champ.valeur %}
                          <tr>
                            <th>{{ champ.nom }}</th>
                            <td style="padding:0 25px 0 25px;">{{ champ.valeur }}</td>
                          </tr>
                        {% endif %}
                      {% endfor %}
                    </table>

                    <div class="d-flex justify-content-center">
                        <div class="d-inline-block" data-toggle="tooltip" data-placement="top" title="Email école">
                            <i class="far fa-envelope"></i> {{ champs.mailEcole.valeur }}
                        </div>
                    </div>

                    {% for account in champs.mailAnnexe.valeur %}
                    <div class="d-flex justify-content-center">
                        <div class="d-inline-block" data-toggle="tooltip" data-placement="top" title="Email perso">
                            <i class="far fa-envelope"></i> {{ account}}
                        </div>
                    </div>
                    {% endfor %}

                    {% for account in champs.mailLocal.valeur %}
                    <div class="d-flex justify-content-center">
                        <div class="d-inline-block" data-toggle="tooltip" data-placement="top" title="Emails locaux">
                            <i class="far fa-envelope"></i> {{ account}}
                        </div>
                    </div>
                    {% endfor %}

                    <div class="mt-2"></div>

                    {% if not full_fiche or afficher_lien_modif or afficher_lien_perms %}
                    <div class="button-group text-center">
                      <a href="https://churros.inpt.fr/users/{{ uid }}"><button type="button" class="btn btn-primary justify-content-center">Profil Churros</button></a>
                        {% if not full_fiche %}<a href="{% url 'annuaire:fiche_full' uid %}"><button type="button" class="btn btn-primary justify-content-center">Voir la fiche complète</button></a>{% endif %}
                        {% if afficher_lien_modif %}<a href="{% url 'gestion:eleves:fiche' uid %}"><button type="button" class="btn btn-primary justify-content-center">Modifier…</button></a>{% endif %}
                        {% if afficher_lien_perms %}<a href="{% url 'gestion:permissions:editer' uid %}"><button type="button" class="btn btn-primary justify-content-center">Gestion Permissions…</button></a>{% endif %}
                    </div>
                    {% endif %}

                    <div id="arbre" data-uid="{{ uid }}" data-request-uid="{{ user.username }}"></div>
                    <script src="{% static "annuaire/arbregenealogique.js" %}"></script>
              </div>
            </fieldset>
        </div>
    </div>
</div>
{% endblock %}

{% block css %}
  <style>
    #arbre {
        height: 480px;
        width: 640px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2em;
    }
  </style>
{%  endblock %}

{% block js %}
  <script src="{% static "js/cytoscape.min.js" %}"></script>
  <script>
      $(function () {
          $('[data-toggle="tooltip"]').tooltip()
      })
  </script>
{% endblock %}