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

{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('styles/main.css') }}?t={{ "now"|date("U") }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css">
{% endblock %}

{% block javascripts %}
    <script src= "/public/script.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
{% endblock %}

{% block title %}Liste des Employés{% endblock %}
{% block body %}
<div class="formation-list">
    <h2>Liste des Employés</h2>
    {% if message %}
        <p style="text-align: center;">{{ message }}</p>
    {% endif %}
    <div class="filter">
        <form method="get" action="{{ path('app_listeEmploye') }}">
            <input type="text" id="nom" name="nom" value="{{ currentNom }}" placeholder="Rechercher par Nom">
            <input type="text" id="prenom" name="prenom" value="{{ currentPrenom }}" placeholder="Rechercher par Prénom">
            <button type="submit">Rechercher</button>
        </form>
    </div>
    {% if ensEmployes is empty %}
        <p>Aucun employé trouvé.</p>
    {% else %}
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Nom</th>
                        <th>Prénom</th>
                        <th>E-mail</th>
                        <th>Statut</th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in ensEmployes %} 
                        <tr onclick="showAlert('{{ user.nom }}', '{{ user.prenom }}', '{{ user.email }}','{{ user.getRoles()|join(', ') }}')">
                            <td data-label="Nom">{{ user.nom }}</td>
                            <td data-label="Prénom">{{ user.prenom }}</td>
                            <td data-label="Mail">{{ user.email }}</td>
                            <td data-label="Roles">{{ user.getRoles() is not empty ? user.getRoles()|join(', ') : 'Aucun rôle' }}</td>                            
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
</div>


<script>
    function showAlert(login, nom, prenom, statut) {
        alert("\nNom: " + nom + "\nPrénom: " + prenom + "\nStatut: " + statut);
    }
</script>
{% endblock %}