{% if is_granted('ROLE_USER') %}
    {% set docutheques = evenement.docutheques %}
{% elseif is_granted('ROLE_REFERENT_FORMATION') %}
    {% set docutheques = evenement.docuthequesReferents %}
{% elseif is_granted('ROLE_FORMATEUR') %}
    {% set docutheques = evenement.docuthequesFormateurs %}
{% endif %}
<div class="mb-4">
    <h3 class="text-2xl font-semibold mb-4"><i class="{{ icon.get('files') }}"></i> Documents</h3>
    {% if docutheques|length > 0 %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for doc in docutheques %}
                {% if (doc.referents == true and is_granted('ROLE_REFERENT_FORMATION')) or (doc.formateurs == true and is_granted('ROLE_FORMATEUR')) or is_granted('ROLE_USER') %}
                    <div
                        class="doc-card bg-white border flex flex-col justify-between shadow-lg rounded-lg p-4 relative"
                        {% if is_granted('ROLE_USER') %}
                            data-id="{{ doc.id }}"
                            data-evenement-id="{{ evenement.id }}"
                            data-formateurs="{{ doc.formateurs ? 1 : 0 }}"
                            data-referents="{{ doc.referents ? 1 : 0 }}"
                            data-type="document"
                        {% endif %}
                    >
                        <div class="doc-info">
                            <h3 class="text-lg text-center font-semibold text-gray-500 break-all">{{ doc.name }}</h3>
                            {% if is_granted('ROLE_USER') %}
                                <p class="text-gray-400">Droits :</p>
                                <ul class="rights-list list-disc list-inside text-gray-500 mb-4">
                                    <li>Formateurs : <span class="val-formateurs">{{ doc.formateurs ? "Oui" : "Non" }}</span></li>
                                    <li>Référents hôtel : <span class="val-referents">{{ doc.referents ? "Oui" : "Non" }}</span></li>
                                </ul>
                            {% endif %}
                        </div>
                        {% if is_granted('ROLE_USER') %}
                            <div class="flex justify-center space-x-2">
                                <button
                                    type="button"
                                    class="edit-btn mt-2 px-2 py-1 bg-bungalow-yellow rounded text-white text-sm"
                                >Modifier</button>
                                <a
                                    href="{{ path('delete_document_docutheque', {'event_id': evenement.id, 'doc_id': doc.id}) }}"
                                    class="mt-2 px-2 py-1 bg-red-500 text-white rounded text-sm delete-btn"
                                >Supprimer</a>
                            </div>
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    {% else %}
        <div class="w-full h-full flex flex-col">
            <p class="text-gray-600 text-xl">Aucun document</p>
        </div>
    {% endif %}
    </div>
</div>