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

{% block body %}
<div class="w-full flex flex-col h-full">
    <div class="flex flex-row items-center justify-between w-full p-3 border-b text-white bg-bungalow-yellow">
        <div class="flex flex-row">
            <a href="{{ path('docutheque_index') }}" class="text-white text-lg">
                <i class="{{ icon.get('book') }}" style="color: #FFFF;"></i>
                Docuthèque
            </a>
            <span class="mx-2">-</span>
            <a href="{{ path('docutheque_event_index', {'event_id': evenement.id}) }}" class="text-white underline text-lg">{{ evenement.title }}</a>
            {% for parent in dossier.getParentRecursive() %}
                <span class="mx-2">-</span>
                <a href="{{ path('docutheque_event_folders', {'event_id': evenement.id, 'folder_id': parent.id}) }}" class="text-lg underline">{{ parent.name }}</a>
            {% endfor %}
            <span class="mx-2">-</span>
            <a class="text-white text-lg">{{ dossier.name }}</a>
        </div>
        <div>
            <a href="{{ path('download_document_folder', {'event_id': evenement.id, 'folder_id': dossier.id}) }}" target="__blank" class="ml-4 px-4 py-2 bg-bungalow-blue text-white font-medium rounded-full text-sm cursor-pointer">Télécharger</a>
            {% if is_granted('ROLE_USER') %}
                <a class="ml-4 px-4 py-2 bg-bungalow-blue text-white font-medium rounded-full text-sm cursor-pointer" data-modal-target="dossier_modal" data-url="{{ path('docutheque_folder_store_folder', {'folder_id': dossier.id}) }}">Ajouter un dossier</a>
                <a class="ml-4 px-4 py-2 bg-bungalow-blue text-white font-medium rounded-full text-sm cursor-pointer" data-modal-target="document_modal" data-url="{{ path('docutheque_folder_documents', {'event_id': evenement.id, 'folder_id': dossier.id}) }}">Ajouter un document</a>
            {% endif %}
        </div>
    </div>
    {% if app.flashes|length > 0 %}
    <div class="p-2">
        {% include "./layouts/message_flash.html.twig" %}
    </div>
    {% endif %}
    <div class="max-h-[80vh] min-h-[80vh] p-4 overflow-y-auto">
        {% include "formation/docutheque/partials/sous_dossier/dossiers.html.twig" %}
        <hr class="my-4 border-gray-300">
        {% include "formation/docutheque/partials/sous_dossier/documents.html.twig" %}
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('docutheque') }}
{% endblock %}


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