{% extends 'base.html.twig' %}

{% block body %}
<div class="w-full flex flex-col h-full">
    <div class="flex flex-row items-center w-full p-3 border-b text-white bg-bungalow-yellow">
        <span class="text-white text-lg w-full">
            <i class="{{ icon.get('book') }}" style="color: #FFFF;"></i>
            Docuthèque
        </span>
    </div>
    {% if app.flashes|length > 0 %}
    <div class="p-2">
        {% include "./layouts/message_flash.html.twig" %}
    </div>
    {% endif %}
    <div class="max-h-[80vh] p-4 overflow-y-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 min-h-[20vh] max-h-[90vh]">
            {% for event in evenements %}
                {% if is_granted('ROLE_USER') %}
                    {% set documents = event.docutheques %}
                    {% set dossiers = event.docuthequeFolders %}
                {% elseif is_granted('ROLE_FORMATEUR') %}
                    {% set documents = event.docuthequesFormateurs %}
                    {% set dossiers = event.getFoldersForFormateurs %}
                {% elseif is_granted('ROLE_REFERENT_FORMATION') %}
                    {% set documents = event.docuthequesReferents %}
                    {% set dossiers = event.FoldersForReferents %}
                {% else %}
                    {% set documents = [] %}
                    {% set dossiers = [] %}
                {% endif %}
                {% if documents|length > 0 or dossiers|length > 0 or is_granted('ROLE_USER') %}
                    <div class="bg-white border flex flex-col justify-between shadow-lg rounded-lg p-4">
                        <div>
                            <h3 class="text-lg text-center mb-4 font-semibold text-gray-500"><i class="{{ icon.get('file') }}"></i> {{ event.title }}</h3>
                        </div>
                        <div class="flex flex-row justify-evenly mt-4">
                            <a href="{{ path('docutheque_event_index', {'event_id': event.id}) }}" class="mt-2 w-fit bg-bungalow-blue text-white font-medium p-2 rounded">Voir plus</a>
                            {% if documents|length > 0 %}
                                <a href="{{ path('download_document_docutheque', {'event_id': event.id}) }}" target="__blank" class="mt-2 w-fit bg-bungalow-yellow text-white font-medium p-2 rounded">Télécharger</a>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}
            {% else %}
                <div class="max-h-[80vh] min-h-[50vh] w-full items-center flex flex-col justify-center">
                    <p class="text-gray-600 text-center text-5xl">Aucun document</p>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{# {% block javascripts %}
    {{ encore_entry_script_tags('formateurs_index') }}
    {{ encore_entry_script_tags('formateurs_update') }}
{% endblock %}


{% block modals %}
    {% include "formation/formateur/modals/create.html.twig" %}
    {% include "formation/formateur/modals/update.html.twig" %}
{% endblock %} #}