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

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

{% block body %}
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold mb-8 text-gray-800">Liste des pistes</h1>

        <div class="mb-6">
            <a href="{{ path('app_piste_crud_new') }}" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300">
                Créer une nouvelle piste
            </a>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full bg-white rounded-lg overflow-hidden">
                <thead class="bg-gray-100">
                <tr>
                    <th class="py-3 px-4 text-left text-gray-700 font-semibold">Id</th>
                    <th class="py-3 px-4 text-left text-gray-700 font-semibold">Titre</th>
                    <th class="py-3 px-4 text-left text-gray-700 font-semibold">Durée</th>
                    <th class="py-3 px-4 text-left text-gray-700 font-semibold">Auteur</th>
                    <th class="py-3 px-4 text-left text-gray-700 font-semibold">Actions</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                {% for piste in pistes %}
                    <tr class="hover:bg-gray-50">
                        <td class="py-3 px-4">{{ piste.id }}</td>
                        <td class="py-3 px-4">{{ piste.title }}</td>
                        <td class="py-3 px-4">{{ piste.dureeFormat }}</td>
                        <td class="py-3 px-4">{{ piste.auteur }}</td>
                        <td class="py-3 px-4 flex space-x-2">
                            <a href="{{ path('app_piste_crud_show', {'id': piste.id}) }}" class="text-blue-500 hover:text-blue-700">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                                    <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                                </svg>
                            </a>
                            <a href="{{ path('app_piste_crud_edit', {'id': piste.id}) }}" class="text-green-500 hover:text-green-700">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                                </svg>
                            </a>
                            {{ include('piste_crud/_delete_form.html.twig') }}
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="5" class="py-4 px-4 text-center text-gray-500">Aucune piste trouvée</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}