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

{% block body %}
<div class="w-full flex flex-col h-full overflow-y-auto">
    <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('puzzle-piece') }}" style="color: #FFFF;"></i>
            Sections
        </span>
        <a class="ml-4 px-4 py-2 bg-bungalow-blue text-white font-medium rounded-full text-sm cursor-pointer" data-modal-target="create_section">Ajouter</a>
    </div>

    {% if sections|length == 0 %}
        <div class="min-h-[80vh] w-full items-center flex flex-col justify-evenly">
            <p class="text-gray-600 text-center text-5xl">Aucune valeur</p>
        </div>
    {% else %}
    <div class="p-4 max-h-[80vh] min-h-[50vh] overflow-y-auto">
        {% include "./layouts/message_flash.html.twig" %}
        <div id="datatable" class="shadow-xl rounded-lg">
            <table class="min-w-full bg-white border border-gray-300 shadow-lg rounded-lg">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ordre</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sous-sections</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rôles</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for section in sections %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ section.ordre ?? 'N/A' }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">{{ section.nom }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            {% if section.sousSections|length > 0 %}
                                <div class="flex flex-wrap gap-1">
                                    {% for sous_section in section.sousSections %}
                                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">{{ sous_section.nom }}</span>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <span class="text-gray-400 text-sm">Aucune</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            {% if section.roles|length > 0 %}
                                <div class="flex flex-wrap gap-1">
                                    {% for role in section.roles %}
                                        <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">{{ role.nom }}</span>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <span class="text-gray-400 text-sm">Aucun</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <div class="flex space-x-2">
                                <a href="{{ path('admin_sections_move_up', {id: section.id}) }}" 
                                   class="text-green-600 hover:text-green-900"
                                   title="Monter">
                                    <i class="{{ icon.get('arrow-up') }}"></i>
                                </a>
                                <a href="{{ path('admin_sections_move_down', {id: section.id}) }}" 
                                   class="text-green-600 hover:text-green-900"
                                   title="Descendre">
                                    <i class="{{ icon.get('arrow-down') }}"></i>
                                </a>
                                <a data-section="{{ section.toArray()|json_encode }}" data-modal-target="edit_section" class="update-button text-indigo-600 hover:text-indigo-900">
                                    <i class="{{ icon.get('pen') }}"></i>
                                </a>
                                <button href="{{ path('admin_sections_delete', {id: section.id}) }}" class="text-red-600 hover:text-red-900 delete-btn">
                                    <i class="{{ icon.get('trash') }}"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
</div>

{% include "admin/sections/create.html.twig" %}
{% include "admin/sections/edit.html.twig" %}

{% endblock %}

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