{% extends 'dashboard/base.twig' %}

{% block title %}Modèles de points de contrôle{% endblock %}

{% block body %}
    <div class="space-y-6">
        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-bold text-white">Modèles de points de contrôle</h1>
            <a href="{{ path('app_template_point_controle_new') }}" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                Nouveau modèle
            </a>
        </div>

        <div class="bg-slate-800 rounded-xl overflow-hidden shadow-sm border border-slate-700">
            <table class="w-full text-left text-sm text-slate-400">
                <thead class="bg-slate-900/50 text-xs uppercase font-medium text-slate-300">
                    <tr>
                        <th class="px-6 py-4">Nom</th>
                        <th class="px-6 py-4">Points</th>
                        <th class="px-6 py-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-700">
                    {% for template in templates %}
                        <tr class="hover:bg-slate-700/30 transition-colors">
                            <td class="px-6 py-4 font-medium text-white">{{ template.name }}</td>
                            <td class="px-6 py-4">
                                <ul class="list-disc list-inside">
                                    {% for point in template.points|slice(0, 3) %}
                                        <li>{{ point }}</li>
                                    {% endfor %}
                                    {% if template.points|length > 3 %}
                                        <li class="list-none text-xs italic opacity-70">+ {{ template.points|length - 3 }} autres...</li>
                                    {% endif %}
                                </ul>
                            </td>
                            <td class="px-6 py-4 text-right space-x-2">
                                <a href="{{ path('app_template_point_controle_edit', {'id': template.id}) }}" class="text-blue-400 hover:text-blue-300 transition-colors">Éditer</a>
                                <form method="post" action="{{ path('app_template_point_controle_delete', {'id': template.id}) }}" class="inline-block" onsubmit="return confirm('Êtes-vous sûr ?');">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ template.id) }}">
                                    <button class="text-red-400 hover:text-red-300 transition-colors">Supprimer</button>
                                </form>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td colspan="3" class="px-6 py-8 text-center italic opacity-50">Aucun modèle trouvé.</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
