{% extends "base.html" %}

{% block extra_javascript %}
<script type="text/javascript">
    $(document).ready(function() {
        $("#id_service, #id_role").change(function() { this.form.submit(); });
    });
</script>
{% endblock %}

{% block extrastyle %}
<style>
#id_texte { width: initial; }
</style>
{% endblock %}

{% block boutons_droite %}
<div class="topnav-right me-3">
    <form class="form selection_form" method="get" action=".">
      <div class="select-container">
        {{ form.role.label_tag }} {{ form.role }}
      </div>
       <div class="select-container">
        {{ form.service.label_tag }} {{ form.service }}
      </div>
      <div class="select-container">
        {{ form.texte }}
         <button id="search-button" type="submit" title="Rechercher"><img src="{% static 'admin/img/search.svg' %}"></button>
         <button id="reset-button" type="reset" title="Réinitialiser tous les filtres"><img src="{% static 'img/filter_off.svg' %}"></button>
         {{ form.sort_by }}
      </div>
    </form>
</div>
{% endblock %}

{% block content %}
    <div class="row border-bottom mb-3">
        <div class="col"><p class="lead">Contacts</p></div>
        {% if perms.aemo.add_contact %}
         <div class="col text-end">
            <a class="btn btn-sm btn-outline-primary" href="{% url 'contact-add' %}">Nouveau contact</a>
         </div>
        {% endif %}
    </div>

    <div class="row">
        <div class="col">
            <table id="contact_table" class="table table-sm  table-hover table-sortable">
                <thead class="table-light">
                <tr>
                    <th data-col="nom">Nom, prénom</th>
                    <th>Téléphone (prof.)</th>
                    <th>Téléphone (privé)</th>
                    <th>Email</th>
                    <th data-col="service">Service</th>
                    <th data-col="role">Rôles</th>
                    <th data-col="activite">Activité/prof.</th>
                </tr>
                </thead>
                <tbody>
                {% with can_edit=perms.aemo.change_contact %}
                {% for contact in object_list %}
                    <tr>
                        <td>{% if can_edit %}<a href="{% url 'contact-edit' contact.pk %}">{% endif %}{{ contact.nom_prenom }}{% if can_edit %}</a>{% endif %}</td>
                        <td>{{ contact.tel_prof }}</td>
                        <td>{{ contact.tel_prive }}</td>
                        <td>{{ contact.email }}</td>
                        <td>{{ contact.service.sigle }}</td>
                        <td>{{ contact.roles_str }}</td>
                        <td>{{ contact.profession }}</td>
                    </tr>
                {% endfor %}
                {% endwith %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}