{% extends 'base.html.twig' %}
{% block title %}Utilisateurs{% endblock %}
{% block body %}
<div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="display-5 fw-bold mb-0">Utilisateurs</h1>
    <button class="btn btn-primary btn-lg shadow" data-bs-toggle="modal" data-bs-target="#addMembreModal">
        <i class="bi bi-plus-lg me-1"></i> Ajouter un utilisateur
    </button>
</div>
<div class="table-responsive shadow-sm rounded">
    <table class="table table-hover align-middle mb-0">
        <thead class="table-light">
            <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Email</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for membre in membres %}
            <tr>
                <td><span class="fw-semibold text-primary">{{ membre.nom }}</span></td>
                <td>{{ membre.prenom }}</td>
                <td>{{ membre.email }}</td>
                <td>
                    <a href="{{ path('membre_detail', {id: membre.id}) }}" class="btn btn-sm btn-info me-1">
                        <i class="bi bi-eye"></i> Détails
                    </a>
                    <button class="btn btn-sm btn-outline-secondary me-1" data-bs-toggle="modal" data-bs-target="#editMembreModal{{ membre.id }}">
                        <i class="bi bi-pencil"></i> Modifier
                    </button>
                    <form method="post" action="{{ path('membre_delete', {id: membre.id}) }}" style="display:inline-block" onsubmit="return confirm('Supprimer cet utilisateur ?');">
                        <input type="hidden" name="_token" value="{{ csrf_token('delete_membre_' ~ membre.id) }}">
                        <button class="btn btn-sm btn-danger"><i class="bi bi-trash"></i> Supprimer</button>
                    </form>
                    <div class="modal fade" id="editMembreModal{{ membre.id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form method="post" action="{{ path('membre_edit', {id: membre.id}) }}">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Modifier l'utilisateur</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <div class="mb-2">
                                            <label class="form-label">Nom</label>
                                            <input type="text" name="nom" class="form-control" value="{{ membre.nom }}" required maxlength="50">
                                        </div>
                                        <div class="mb-2">
                                            <label class="form-label">Prénom</label>
                                            <input type="text" name="prenom" class="form-control" value="{{ membre.prenom }}" required maxlength="50">
                                        </div>
                                        <div class="mb-2">
                                            <label class="form-label">Email</label>
                                            <input type="email" name="email" class="form-control" value="{{ membre.email }}" required maxlength="100">
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                                        <button type="submit" class="btn btn-primary">Enregistrer</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="4" class="text-center text-muted">Aucun utilisateur trouvé.</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

{# Modal ajout utilisateur #}
<div class="modal fade" id="addMembreModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" action="{{ path('membre_add') }}">
                <div class="modal-header">
                    <h5 class="modal-title">Ajouter un utilisateur</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <label class="form-label">Nom</label>
                        <input type="text" name="nom" class="form-control" required maxlength="50">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Prénom</label>
                        <input type="text" name="prenom" class="form-control" required maxlength="50">
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" required maxlength="100">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                    <button type="submit" class="btn btn-primary">Ajouter</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}