{% extends 'admin/base.twig' %}
{% block title %}Produit(s){% endblock %}
{% block page_title %}Liste des Produits{% endblock %}

{% block body %}
    <style>
        .dz{
            display: block;
            text-align: center;
            width: 100%;
        }
    </style>
    <div class="flex justify-end">
        <a href="{{ path('admin_product_create') }}"
           class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium
                  shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2
                  focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 dz">
            {# Vous pouvez ajouter ici une icône si vous le souhaitez, par exemple : [Icône] #}
            Créer un Produit
        </a>
    </div>
    <div class="overflow-x-auto bg-gray-700">
        <table class="min-w-full divide-y divide-gray-200">

            {# --- EN-TÊTE DU TABLEAU (HEAD) --- #}
            <thead class="bg-gray-800">
            <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">
                    REF
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">
                    Name
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-white uppercase tracking-wider">
                    Prix
                </th>
                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-white uppercase tracking-wider">
                    Actions
                </th>
            </tr>
            </thead>

            {# --- CORPS DU TABLEAU (BODY) --- #}
            <tbody class="bg-gray-600 divide-y divide-gray-200">

            {# Démonstration: Boucle sur une liste de membres (members) passée par votre contrôleur #}
            {% if products is not empty %}
                {% for product in products %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-white">{{ product.ref }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-white">{{ product.name }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-white">{{ product.price|format_currency('EUR') }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <a href="{{ path('admin_product_edit', {id: product.id}) }}" class="text-indigo-900 hover:text-indigo-900 mr-4">
                                Éditer
                            </a>
                            <a href="{{ path('admin_products', {id: product.id}) }}" class="text-red-900 hover:text-red-900">
                                Supprimer
                            </a>
                        </td>
                    </tr>
                {% endfor %}
            {% else %}
                {# Message si la liste est vide #}
                <tr>
                    <td colspan="4" class="px-6 py-12 text-center text-gray-500">
                        Aucun produit(s) trouvé.
                    </td>
                </tr>
            {% endif %}

            </tbody>
        </table>
    </div>

{% endblock %}
