{% if is_granted('ROLE_USER') %}
    {% set docuthequesFolders = dossier.children %}
{% elseif is_granted('ROLE_REFERENT_FORMATION') %}
    {% set docuthequesFolders = dossier.getChildrenForReferents %}
{% elseif is_granted('ROLE_FORMATEUR') %}
    {% set docuthequesFolders = dossier.getChildrenForFormateurs %}
{% endif %}

<div class="mb-4">
  <h3 class="text-2xl font-semibold mb-4"><i class="{{ icon.get('folder') }}"></i> Dossiers</h3>
  <div id="folders-container" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    {% if docuthequesFolders|length > 0 %}
      {% for children in docuthequesFolders %}
        <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="{{ children.id }}"
            data-evenement-id="{{ evenement.id }}"
            data-formateurs="{{ children.formateurs ? 1 : 0 }}"
            data-referents="{{ children.referents ? 1 : 0 }}"
            data-type="dossier"
            data-parent-id="{{ children.parent ? children.parent.id : "-1" }}"
            data-childrens="{{ children.getChildrenRecursive|length }}"
          {% endif %}
        >
          <div class="doc-info">
            <h3 class="text-lg text-center font-semibold text-gray-500 break-all">{{ children.name }}</h3>
            {% if is_granted('ROLE_USER') %}
              <div class="flex justify-between items-center">
                <p class="text-gray-400">Droits :</p>
                <button
                    type="button"
                    class="edit-btn mt-2 px-2 py-1 bg-bungalow-yellow rounded text-white text-sm"
                ><i class="{{ icon.get('pen') }}"></i></button>
              </div>
              <ul class="rights-list list-disc list-inside text-gray-500">
                  <li>Formateurs : <span class="val-formateurs">{{ children.formateurs ? "Oui" : "Non" }}</span></li>
                  <li>Référents hôtel : <span class="val-referents">{{ children.referents ? "Oui" : "Non" }}</span></li>
              </ul>
            {% endif %}
            {% if is_granted('ROLE_USER') %}
                {% set sousDossiers = children.getChildren %}
                {% set documents    = children.getDocuments.toArray %}
            {% elseif is_granted('ROLE_REFERENT_FORMATION') %}
                {% set sousDossiers = children.getChildrenForReferents %}
                {% set documents    = children.getDocumentsReferents.toArray %}
            {% elseif is_granted('ROLE_FORMATEUR') %}
                {% set sousDossiers = children.getChildrenForFormateurs %}
                {% set documents    = children.getDocumentsFormateurs.toArray %}
            {% endif %}

            {% if sousDossiers|length == 0 and documents|length == 0 %}
              <p class="text-gray-600 text-center text-sm mt-2">
                Aucun sous-dossier ni document disponible
              </p>
            {% else %}
              {% if sousDossiers|length > 0 %}
                <p class="text-gray-400">Sous-dossiers :</p>
                <ul class="list-disc list-inside text-gray-500 mb-4">
                  {% for sousDossier in sousDossiers %}
                    <li class="truncate">{{ sousDossier.name }}</li>
                  {% endfor %}
                </ul>
              {% endif %}

              {% if documents|length > 0 %}
                <p class="text-gray-400">Documents :</p>
                <ul class="list-disc list-inside text-gray-500 mb-4">
                  {% for doc in documents %}
                    <li class="truncate">{{ doc.name }}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            {% endif %}
          </div>


          <div class="flex justify-center space-x-2">
            {% if (sousDossiers|length != 0 or documents|length != 0) or is_granted('ROLE_USER') %}
              <a
                href="{{ path('docutheque_event_folders', {'event_id': evenement.id, 'folder_id': children.id}) }}"
                type="button"
                class="voir-plus-btn mt-2 px-2 py-1 bg-bungalow-blue rounded text-white text-sm"
              >
                Voir plus
              </a>
            {% endif %}
            {# on passe en <button> pour la suppression via JS #}
            {% if is_granted('ROLE_USER') %}
              <button
                type="button"
                class="delete-folder-btn mt-2 px-2 py-1 bg-red-500 text-white rounded text-sm"
              >
                Supprimer
              </button>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    {% else %}
      <div class="w-full h-full flex flex-col">
        <p class="text-gray-600 text-xl">Aucun dossier</p>
      </div>
    {% endif %}
  </div>
</div>