{# templates/questionnaire/index.html.twig #}
{% extends 'admin/dashboard.html.twig' %}

{% block title %}Questionnaires{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="flex items-center justify-between">
        <h1 class="text-3xl font-bold text-gray-800">Tous les questionnaires</h1>
        <a href="{{ path('app_questionnaire_new') }}" class="inline-flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Nouveau questionnaire
        </a>
    </div>

    {% if questionnaires is empty %}
        <div class="bg-white rounded-xl shadow-sm p-6 text-center text-gray-600">
            Aucun questionnaire trouvé.
        </div>
    {% else %}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {% for questionnaire in questionnaires %}
                <article class="bg-white rounded-2xl shadow p-6 flex flex-col justify-between">
                    <div>
                        <h2 class="text-lg font-semibold text-gray-800 mb-2">
                            {{ questionnaire.title ?? ('Questionnaire #' ~ questionnaire.id) }}
                        </h2>

                        {% if questionnaire.description is defined and questionnaire.description %}
                            <p class="text-sm text-gray-500 mb-4 line-clamp-3">{{ questionnaire.description }}</p>
                        {% endif %}
                    </div>

                    <div class="mt-4 flex flex-col gap-2">
                        <div class="flex flex-wrap gap-2">
                            <a href="{{ path('app_questionnaire_show', {'id': questionnaire.id}) }}" class="inline-flex items-center gap-2 border border-indigo-100 text-indigo-600 px-3 py-2 rounded-md hover:bg-indigo-50 transition text-sm">
                                <i data-lucide="eye" class="w-4 h-4"></i> Voir
                            </a>

                            <a href="{{ path('app_questionnaire_edit', {'id': questionnaire.id}) }}" class="inline-flex items-center gap-2 bg-indigo-600 text-white px-3 py-2 rounded-md hover:bg-indigo-700 transition text-sm">
                                <i data-lucide="edit-2" class="w-4 h-4"></i> Éditer
                            </a>

                            {# Bouton Statistiques #}
                            <a href="{{ path('app_questionnaire_stats', {'id': questionnaire.id}) }}" class="inline-flex items-center gap-2 bg-emerald-600 text-white px-3 py-2 rounded-md hover:bg-emerald-700 transition text-sm">
                                <i data-lucide="bar-chart-2" class="w-4 h-4"></i> Stats
                            </a>
                        </div>

                        {% if questionnaire.publicToken %}
                            <div class="flex gap-2 mt-2">
                                <input id="public-link-{{ questionnaire.id }}" type="text" 
                                    value="{{ url('public_survey_take', {'token': questionnaire.publicToken}) }}" 
                                    readonly
                                    class="border rounded px-3 py-2 w-full" />

                                <button type="button" 
                                        onclick="navigator.clipboard.writeText(document.getElementById('public-link-{{ questionnaire.id }}').value)"
                                        class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 transition text-sm">
                                    Copier
                                </button>
                            </div>
                        {% endif %}
                    </div>
                </article>
            {% endfor %}
        </div>
    {% endif %}
</div>

<script>
    // Générer toutes les icônes Lucide
    lucide.createIcons();
</script>
{% endblock %}