{% if is_granted('ROLE_USER') %}
    {% set docuthequesFolders = evenement.docuthequeFolders %}
{% elseif is_granted('ROLE_REFERENT_FORMATION') %}
    {% set docuthequesFolders = evenement.foldersForReferents %}
{% elseif is_granted('ROLE_FORMATEUR') %}
    {% set docuthequesFolders = evenement.foldersForFormateurs %}
{% 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 dossier 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="{{ dossier.id }}"
            data-evenement-id="{{ evenement.id }}"
            data-formateurs="{{ dossier.formateurs ? 1 : 0 }}"
            data-referents="{{ dossier.referents ? 1 : 0 }}"
            data-parent-id="{{ dossier.parent ? dossier.parent.id : -1 }}"
            data-childrens="{{ dossier.getChildrenRecursive|length }}"
            data-type="dossier"
          {% endif %}
        >
          <div class="doc-info folder mb-4">
            <h3 class="text-lg text-center font-semibold text-gray-500">{{ dossier.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">
                  <li>Formateurs : <span class="val-formateurs">{{ dossier.formateurs ? "Oui" : "Non" }}</span></li>
                  <li>Référents hôtel : <span class="val-referents">{{ dossier.referents ? "Oui" : "Non" }}</span></li>
              </ul>
              <div class="flex justify-center">
                <button
                    type="button"
                    class="edit-btn mt-2 px-2 py-1 bg-bungalow-yellow rounded text-white text-sm"
                >Modifier</button>
              </div>
            {% endif %}
            {% if is_granted('ROLE_USER') %}
                {% set sousDossiers = dossier.getChildren %}
                {% set documents    = dossier.getDocuments %}
            {% elseif is_granted('ROLE_REFERENT_FORMATION') %}
                {% set sousDossiers = dossier.getChildrenForReferents %}
                {% set documents    = dossier.getDocumentsReferents %}
            {% elseif is_granted('ROLE_FORMATEUR') %}
                {% set sousDossiers = dossier.getChildrenForFormateurs %}
                {% set documents    = dossier.getDocumentsFormateurs %}
            {% 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>{{ 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>{{ 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': dossier.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 %}
            {% 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>