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

{% block title %} Gestion des organisations {% endblock %}

{% block body %}
    <div class="w-100 h-100 p-5 m-auto" data-controller="organization">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>Gestion des organisations</h1>
            {% if is_granted("ROLE_SUPER_ADMIN") %}
                <a href="{{ path('organization_new') }}" class="btn btn-primary">Ajouter une organisation</a>
            {% endif %}
        </div>
        {% if organizations|length == 0 %}
            <tr>
                <td colspan="4" class="text-center">Aucune organisation trouvée.</td>
                <td colspan="4" class="text-center">
                    <a href="{{ path('organization_new') }}" class="btn btn-primary">Créer une organisation</a>
                </td>
            </tr>
        {% else %}
            <table class="table align-middle shadow">
                <thead class="table-light shadow-sm">
                <tr>
                    <th>Logo</th>
                    <th>Nom</th>
                    <th>Email</th>
                    <th>Visualiser</th>
                </tr>
                </thead>
                <tbody>
                {% for organization in organizations %}
                    <tr>
                        <td>
                            {% if organization.logoUrl %}
                                <img src="{{ asset(organization.logoUrl) }}" alt="Organization logo"
                                     class="rounded-circle" style="width:40px; height:40px;">
                            {% endif %}
                        </td>
                        <td>{{ organization.name }}</td>
                        <td>{{ organization.email }}</td>
                        <td>
                            <a href="{{ path('organization_show', {'id': organization.id}) }}"
                               class="p-3 align-middle color-primary">
                                {{ ux_icon('fa6-regular:eye', {height: '30px', width: '30px'}) }}
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% endif %}

    </div>
{% endblock %}