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

{% block title %}Dashboard{% endblock %}

{% block body %}
    <div class="container mx-auto px-16">
        <h1 class="text-center text-2xl font-bold mt-4">Liste des fichiers</h1>
        <div class="mt-4">
            {{ include('partials/alerts.html.twig') }}
        </div>
        {% if parentDir == null or (parentDir != null and is_granted('file_write', parentDir)) %}
        <div class="flex justify-end">
            <a href="{{ path('app_files_create_directory', {
                base: path
            }) }}" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-hidden dark:focus:ring-blue-800">Créer un dossier</a>
            {% if path != '' %}
            <a href="{{ path('app_files_upload', {
                path: path
            }) }}" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-hidden dark:focus:ring-blue-800">Ajouter des fichiers</a>
            {% endif %}
        </div>
        {% endif %}
        <div class="mt-4">
            {% include 'partials/breadbrumb.html.twig' %}
        </div>

        <div class="relative overflow-x-auto mt-4">
            <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                <tr>
                    <th scope="col" class="px-6 py-3">
                        Nom
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Taille
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Modifié le
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Groupes d'accès
                    </th>
                    <th scope="col" class="px-6 py-3">
                        Actions
                    </th>
                </tr>
                </thead>
                <tbody>
                {% for file in files %}
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                        <th class="px-6 py-4 font-medium light:text-gray-900 whitespace-nowrap flex gap-2">
                            {% if file.type == 'file' %}
                                <twig:ux:icon name="line-md:file-filled" class="w-6 h-6" />
                            {% else %}
                                <twig:ux:icon name="line-md:folder-filled" class="w-6 h-6" />
                            {% endif %}
                            <a class="text-blue-700 dark:text-blue-500 hover:text-blue-900 dark:hover:text-blue-700" href="{{ file.previewUrl }}" {{ file.type == 'file' ? 'target="_blank"' : '' }}>{{ file.path|basename }}</a>
                        </th>
                        <td class="px-6 py-4">
                            {{ file.size|show_size }}
                        </td>
                        <td class="px-6 py-4">
                            {{ file.last_modified|time_diff }}
                        </td>
                        <td class="px-6 py-4">
                            <div class="flex gap-1">
                                {% if parentDir == null %}
                                    {% set parentDirectory = get_parent_dir(file.path) %}
                                {% else %}
                                    {% set parentDirectory = parentDir %}
                                {% endif %}
                                {% for parentRole in parentDirectory.ownerRole.getHigherRoles() %}
                                    <img class="w-6 h-6" title="{{ parentRole.value }}" src="https://ui-avatars.com/api/?name={{ parentRole.value  }}" alt="">
                                {% endfor %}
                                <img class="w-6 h-6" title="{{ parentDirectory.ownerRole.value }}" src="https://ui-avatars.com/api/?name={{ parentDirectory.ownerRole.value }}" alt="">
                                {% for permission in parentDirectory.parentDirectoryPermissions %}
                                    <img class="w-6 h-6" title="{{ permission.role.value }}" src="https://ui-avatars.com/api/?name={{ permission.role.value  }}" alt="">
                                {% endfor %}
                            </div>
                        </td>
                        <td class="px-6 py-4 flex gap-2 light:text-black">
                            {% if file.type == 'file' %}
                                <a title="Permet de voir le fichier" href="{{ file.previewUrl }}" class="hover:text-blue-700 duration-300"><twig:ux:icon class="w-6 h-6" name="fa6-solid:eye" /></a>
                                <button title="Permet de copier le lien de prévisualisation du fichier" onclick="navigator.clipboard.writeText('{{ file.previewUrl }}'); alert('Lien copié avec succès !')"  class="hover:text-blue-700 duration-300"><twig:ux:icon class="w-6 h-6 cursor-pointer" name="fa6-solid:clipboard" /></button>
                                <a title="Permet de télécharger le fichier" href="{{ file.url }}" class="hover:text-blue-700 duration-300"><twig:ux:icon class="w-6 h-6" name="fa6-solid:download" /></a>
                                {% if is_granted('file_write', parentDir) %}
                                <a title="Permet de renommer le fichier" href="{{ path('app_files_rename', {
                                    path: file.path
                                }) }}" class="hover:text-blue-700 duration-300"><twig:ux:icon class="w-6 h-6" name="fa6-solid:pencil" /></a>
                                <a title="Permet de supprimer le fichier" href="{{
                                    path('app_files_delete', {
                                        filename: file.path
                                    })
                                }}" class="hover:text-red-700 duration-300"><twig:ux:icon class="w-6 h-6" name="fa6-solid:trash-can" /></a>
                                    {% endif %}
                                {% else %}
                                    {% if parentDir == null %}
                                        {% set parentDirectory = get_parent_dir(file.path) %}
                                    {% else %}
                                        {% set parentDirectory = parentDir %}
                                    {% endif %}

                                    {% if parentDir == null and (parentDirectory.userCreated == app.user or (parentDirectory.isPublic and app.user.folderRole == enum('App\\Enum\\RoleEnum').CONSEIL_ADMINISTRATION)) %}
                                        <a href="{{ path('app_files_file_edit_permission', {
                                            parentDir: parentDirectory.name,
                                        }) }}" class="hover:text-blue-700 duration-300" title="Permet de modifier les permissions du dossier"><twig:ux:icon class="w-6 h-6" name="fa6-solid:shield" /></a>
                                    {% endif %}
                                    {% if is_granted('file_write', parentDirectory) %}
                                    <a href="{{ path('app_files_rename-directory', {
                                        path: file.path
                                    }) }}" class="hover:text-blue-700 duration-300" title="Permet de renommer le dossier"><twig:ux:icon class="w-6 h-6" name="fa6-solid:pencil" /></a>
                                    <a href="{{ path('app_files_delete_directory', {
                                        path: file.path
                                    }) }}" class="hover:text-red-700 duration-300" title="Permet de supprimer le dossier"><twig:ux:icon class="w-6 h-6" name="fa6-solid:trash-can" /></a>
                                    {% endif %}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}