{% extends 'base.html.twig' %}

{% block body %}
<div class="w-full flex flex-col h-full overflow-y-auto">
    <div class="flex flex-row items-center w-full p-3 border-b text-white bg-bungalow-yellow">
        <span class="text-white text-lg w-full">
            <i class="{{ icon.get('annuaire') }}" style="color: #FFFF;"></i>
            Annuaire
        </span>
        <a class="ml-4 px-4 py-2 bg-bungalow-blue text-white font-medium rounded-full text-sm cursor-pointer" data-modal-target="contacts_from_departement">Exporter</a>
        <a class="ml-4 px-4 py-2 bg-bungalow-blue text-white font-medium rounded-full text-sm cursor-pointer" data-modal-target="create_contact">Ajouter</a>
    </div>

    {% if contacts|length == 0 %}
        <div class="min-h-screen w-full items-center flex flex-col justify-evenly">
            <p class="text-gray-600 text-center text-5xl">Aucun contact</p>
        </div>
    {% else %}
    <div class="p-4 max-h-[80vh] min-h-[50vh] overflow-y-auto">
        {% include "./layouts/message_flash.html.twig" %}
        <div id="datatable" class="shadow-xl rounded-lg">
            <table class="table-fixed w-full text-md text-left rtl:text-right text-gray-500">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-2 py-3 border-r">Nom</th>
                        <th scope="col" class="px-2 py-3 border-r">Prénom</th>
                        <th scope="col" class="px-2 py-3 border-r">Fonction</th>
                        <th scope="col" class="px-2 py-3 border-r">Structures</th>
                        <th scope="col" class="px-2 py-3 border-r">Localisation</th>
                        <th scope="col" class="px-2 py-3">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for contact in contacts %}
                    <tr class="odd:bg-white even:bg-gray-100 border-b">
                        <td class="px-2 py-4 border-r text-wrap text-center">{{ contact.nom ?? "----" }}</td>
                        <td class="px-2 py-4 border-r text-wrap text-center">{{ contact.prenom ?? "----" }}</td>
                        <td class="px-2 py-4 border-r text-wrap text-center">{{ contact.fonction ?? "----" }}</td>
                        <td class="px-2 py-4 border-r text-wrap items-center text-center">
                            {% if contact.hotels|length > 0 or contact.autreStructure is not empty %}
                                <p>
                                {% for hotel in contact.hotels %}
                                    {{hotel.nom}}{% if not loop.last %}<br>{% endif %}
                                {% endfor %}
                                </p>
                                <p>{{contact.autreStructure}}</p>
                            {% else %}
                                -----
                            {% endif %}
                        </td>
                        <td class="px-2 py-4 border-r text-wrap text-center">
                            {% if contact.localisation|length > 0 %}
                                {% for localisation in contact.localisation %}
                                    {{localisations[localisation]}}{% if not loop.last %}<br>{% endif %}
                                {% endfor %}
                            {% else %}
                                -----
                            {% endif %}
                        </td>
                        <td class="px-2 py-4 text-center">
                            <a href="{{ path('index_contact', {contact_id: contact.id}) }}" target="_blank" class="bg-green-500 text-white font-medium p-2 rounded hover:bg-green-700 inline-flex items-center">
                                <i class="{{ icon.get('eye') }}"></i>
                            </a>
                            <a data-contact="{{ contact.toArray()|json_encode }}" data-modal-target="update_contact" class="update-button bg-blue-500 text-white font-medium p-2 rounded hover:bg-blue-700 inline-flex items-center">
                                <i class="{{ icon.get('pen') }}"></i>
                            </a>
                            <a href="{{ path('delete_contact', {'contact_id': contact.id}) }}" class="bg-red-500 text-white font-medium p-2 rounded hover:bg-red-700 inline-flex items-center delete-btn">
                                <i class="{{ icon.get('trash') }}"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('annuaire') }}
{% endblock %}

{% block modals %}
    {% include "annuaire/modals/create.html.twig" %}
    {% include "annuaire/modals/edit.html.twig" %}
    {% include "annuaire/modals/contacts_from_departement.html.twig" %}
{% endblock %}