{% extends "main.html" %}
{% load static %}
{% block title %}Annuaire{% endblock %}

{% block content %}
<div class="default-container">
    <h1>{% if q %}Résultat de la recherche {% if resultats %}<a href="{% url 'annuaire:vcard_rech' %}?q={{ q|urlencode }}"><img class="alignTextBottom" src="{% static "annuaire/vcard.png" %}" alt="vcard" title="Télécharger les vCard" /></a>{% endif %}{% else %}Rechercher dans l’annuaire{% endif %}</h1>

    <form method="get" action="" class="form-inline input-group">
     <input class="form-control" class="form-control mr-sm-2" type="search" placeholder="Annuaire des élèves" name="q" value="{{ q }}" autofocus="autofocus" >
      <div class="input-group-append">
        <button class="btn btn-outline-success" type="submit"><i class="fas fa-search"></i></button>
      </div>
    </form>

    {% if q %}
        <em>Nombre de résultats trouvés : {{ resultats|length }}.</em><br />
        <div class="row">
        {% for user in resultats %}
        <div class="col-sm-12 col-md-6 col-lg-4 p-2">
            <div class="card h-100" style="position:relative">
                <div class="row h-100 no-gutters">
                    <div class="col-3 col-md-4">
                    <img src="{% url 'annuaire:photo'  user.uid %}" class="h-100 card-img-top" style="object-fit: cover;" alt="Photo de {{ user.prenom }}" />
                    </div>
                    <div class="col-9 col-md-8" style="position:static">
                        <div class="card-body">
                            <h5 class="card-title">
                                <a href="{% url 'annuaire:fiche' user.uid %}" class="stretched-link">{{ user.prenom }} {{ user.nom }}</a>
                            </h5>
                            <p class="card-text">{{ user.filiere.get.shortName }}<br />{{ user.promo }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
            <br />
            <div class="boite_ok">
                <ul>
                    <li>Vous pouvez rechercher une personne en indiquant son nom, prénom, ou login INP-net.</li>
                    <li>Vous pouvez également obtenir le trombinoscope d’une promo en entrant son identifiant, par
                    exemple « {{ filieres|random }} 2012 », ou encore « 1A {{ filieres|random }} ».</li>
                </ul>
            </div>
        <br />
            La recherche n’a donné aucun résultat…
        {% endfor %}
        </div>
    {% else %}
        <br />
        <div class="boite_ok">
            <ul>
                <li>Vous pouvez rechercher une personne en indiquant son nom, prénom, ou login INP-net.</li>
                <li>Vous pouvez également obtenir le trombinoscope d’une promo en entrant son identifiant, par
                exemple « {{ filieres|random }} 2012 », ou encore « 1A {{ filieres|random }} ».</li>
            </ul>
        </div>
    {% endif %}
</div>
{% endblock %}