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

{% block title %}Liste des clients{% endblock %}


{% block stylesheets %}
    {{parent()}}
    <link rel="stylesheet" href=" {{asset('css/view-data.css')}} ">
    <link rel="stylesheet" href=" {{asset('css/user.css')}} ">
{% endblock %}

{% block body %}
	{# Affichage de la barre de navigation de gauche #}
    {{ render(controller("App\\Controller\\Admin\\AdminController::navbarLeftAdmin")) }}

	<div class="main-list">
		<h1 class="list-title">
            Liste des clients 
            <a href="{{ path('admin_user_create', {'role': "customer"}) }}">
                <div class=" btn-action">
                    <img class ="img-45" src="{{asset('img/png/add.png')}}" alt="">
                </div>
            </a>
        </h1>

        <div class="">
            <table class="table table-hover table-worker">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Nom</th>
                        <th scope="col">Prénom</th>
                        <th scope="col">Mail</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {% for customer in customerList %}
                        <tr>
                            <th scope="row">1</th>
                            <td>{{ customer.lastname }}</td>
                            <td>{{ customer.firstname }}</td>
                            <td>{{ customer.email }}</td>
                            <td class="div-btn-action">
                                <a href="{{ path('admin_user_edit', { 'id': customer.id }) }}"
                                    class="" title="Modifier le compte">
                                    <div class="btn-action effect-button">
                                        <img class="img-45" src="{{ asset('img/svg/edit-4.svg') }}" alt="">
                                    </div>
                                </a>

                                <button type="button" 
                                        class="btn-action effect-button" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#conf-delete-user-{{ customer.id }}"
                                        title="Supprimer le compte"
                                    >
                                    <img class="img-45" src="{{ asset('img/svg/trash-red-1.svg') }}" alt="">
                                </button>

                                <a href="{{ path('admin_user_view', {'id': customer.id}) }}"
                                    class="" title="Voir le compte">
                                    <div class="btn-action effect-button">
                                        <img class="img-45" src="{{ asset('img/png/eye-1.png') }}" alt="">
                                    </div>
                                </a>
                            </td>
                        </tr>

                        {# Confirmation Suppression d'un utilisateur #}
                        <div class="modal fade" id="conf-delete-user-{{ customer.id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5" id="staticBackdropLabel"><img class="img-50" src="{{ asset('img/svg/trash-red.svg') }}" alt=""> Suppression</h1>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        Voulez-vous vraiment supprimer l'utilisateur : {{customer.lastname }} {{customer.firstname }}
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                                        <a href="{{ path('admin_user_delete', {'id': customer.id}) }}">
                                            <button type="button" class="btn btn-danger">Supprimer</button>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </tbody>
            </table>
        </div>
		
	</div>

{% endblock %}