<div class="@container flex flex-col">
    <div class="overflow-x-auto">
        <div class="inline-block min-w-full align-middle">
            <div class="overflow-hidden py-4 shadow">
                <table class="min-w-full table-fixed divide-y divide-gray-200 dark:divide-gray-600">
                    <thead class="bg-gray-200 dark:bg-gray-700">
                    <tr>
                        <th
                            scope="col"
                            class="p-4 text-center text-xs font-medium text-gray-500 uppercase dark:text-gray-400">
                            #
                        </th>
                        <th
                            scope="col"
                            class="p-4 text-center text-xs font-medium text-gray-500 uppercase @max-sm:hidden dark:text-gray-400">
                            Crée le
                        </th>
                        <th
                            scope="col"
                            class="p-4 text-center text-xs font-medium text-gray-500 uppercase dark:text-gray-400">
                            {{ 'tenant.table.fullName'|trans([],'serenity_saas_messages.admin')|upper|raw }}
                        </th>
                        <th
                            scope="col"
                            class="p-4 text-center text-xs font-medium text-gray-500 uppercase dark:text-gray-400">
                            {{ 'tenant.table.projects'|trans([],'serenity_saas_messages.admin')|upper|raw }}
                        </th>
                        <th
                            scope="col"
                            class="p-4 text-center text-xs font-medium text-gray-500 uppercase dark:text-gray-400">
                            Switch
                        </th>
                    </tr>
                    </thead>
                    {% if items|length > 0 %}
                        <tbody class="table-striped divide-y divide-gray-200 dark:divide-gray-700">
                        {# @var item \Serenity\SaasBundle\Entity\Tenant #}
                        {% for item in items %}
                            <tr class="h-24 hover:bg-gray-100 dark:hover:bg-gray-700">
                                <td class="items-center p-4 text-center text-sm whitespace-nowrap">
                                    #
                                    {{- loop.index * items.currentPageNumber + (items.getPaginationData.numItemsPerPage * (items.currentPageNumber - 1 )) }}
                                </td>
                                <td class="items-center p-4 text-center text-sm whitespace-nowrap @max-sm:hidden">
                                    {{ item.createdAt|format_datetime('short', 'short', locale = app.request.locale) }}
                                </td>
                                <td class="items-center p-4 text-center whitespace-nowrap">
                                    <div class="font-normal">
                                        {% if item.profile %}
                                            <div class="text-sm font-normal">
                                                {% if item.profile.company %}
                                                    <div
                                                        class="text-gray-500 dark:text-gray-400">{{ item.profile.company }}</div>
                                                {% endif %}
                                                {{ item.profile.fullName }}
                                            </div>
                                        {% endif %}
                                        <div
                                            class="text-xs text-gray-500 dark:text-gray-400">{{ item.userIdentifier }}</div>
                                    </div>
                                </td>
                                <td class="items-center p-4 text-center text-sm whitespace-nowrap">
                                    {% if item.projects %}
                                        {% for project in item.projects|slice(0, 2) %}
                                            {# @var project \Serenity\SaasBundle\Entity\Project #}
                                            <div class="text-gray-500 dark:text-gray-400">{{ project.name }}</div>
                                            <div
                                                class="text-xs text-gray-500 dark:text-gray-400">{{ project.domainIn }}</div>
                                        {% endfor %}
                                        {% if item.projects|length > 2 %}
                                            <div class="relative mt-2">
                                                <button
                                                    type="button"
                                                    class="peer inline-block rounded-xl bg-gray-100 px-2 py-1 text-center leading-none tracking-wide text-gray-900"
                                                    aria-describedby="tooltipProject">
                                                    + {{ item.projects|length - 2 }}
                                                </button>
                                                <div
                                                    id="tooltipProject"
                                                    x-cloak
                                                    class="pointer-events-none absolute bottom-full left-1/2 z-10 mb-2 flex w-72 -translate-x-1/2 flex-col gap-1 rounded-sm bg-neutral-950 p-2.5 text-xs text-neutral-300 opacity-0 transition-all ease-out peer-hover:opacity-100 peer-focus:opacity-100 dark:bg-white dark:text-neutral-600"
                                                    role="tooltip">
                            <span
                                class="text-sm font-medium text-white dark:text-neutral-900">
                              {{- 'project.others'|trans([],'serenity_saas_messages.admin') -}}
                            </span>
                                                    {% for project in item.projects|slice(2) %}
                                                        <div class="text-gray-500 dark:text-gray-400">
                                                            {{ project.name }} | {{ project.domainIn }}
                                                        </div>
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% else %}

                                    {% endif %}
                                </td>
                                <td class="flex items-center justify-center p-4 text-center text-sm whitespace-nowrap">
                                    <a href="?_switch={{ item.userIdentifier }}" class="hover:text-primary-hover">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="24"
                                            height="24"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            stroke-width="2"
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            class="lucide lucide-users-round-icon lucide-users-round">
                                            <path d="M18 21a8 8 0 0 0-16 0"/>
                                            <circle cx="10" cy="8" r="5"/>
                                            <path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3"/>
                                        </svg>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    {% else %}
                        <tbody class="table-striped divide-y divide-gray-200 dark:divide-gray-700">
                        <tr class="w-full items-center justify-center text-center">
                            <td class="p-6" colspan="5">Aucun Tenants</td>
                        </tr>
                        </tbody>
                    {% endif %}
                </table>
            </div>
        </div>
    </div>
</div>
