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

{% block title %}User index{% endblock %}

{% block body %}
    <main class="relative h-screen w-screen flex flex-col justify-center items-center overflow-auto">
        <section class="relative w-full h-full flex justify-center z-10">
            <div class="relative flex flex-col w-full">
                {% include 'admin/header.html.twig' with {'title': 'Users', 'button_link': path('app_user_new'), 'button_text': 'Create new'} %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50 h-14">
                            <tr>
                                <th scope="col" class="px-8 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[50px]">Id</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[100px]">Profile Picture</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[150px]">Username</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[200px]">Email</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[150px]">Banner</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[200px]">Website Link</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[150px]">Country</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[150px]">Created At</th>
                                <th scope="col" class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider max-w-[150px]">Roles</th>
                                <th scope="col" class="px-8 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">
                        {% set sortedUsers = users|sort((user1, user2) => user1.id <=> user2.id) %}
                        {% for user in sortedUsers %}
                            <tr>
                                <td class="px-8 py-4 whitespace-nowrap truncate">{{ user.id }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[150px]">
                                    <img src="{{ user.profilePicture }}" alt="Profile picture of {{ user.username }}" class="w-8 h-8 rounded-full">
                                </td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[100px] truncate">{{ user.username }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[200px] truncate">{{ user.email }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[150px] truncate">{{ user.banner }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[100px] truncate">{{ user.websiteLink }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[150px] truncate">{{ user.country ? user.country.value : '' }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[150px] truncate">{{ user.createdAt ? user.createdAt|date('Y-m-d H:i:s') : '' }}</td>
                                <td class="px-2 py-4 whitespace-nowrap max-w-[150px] truncate">{{ user.roles ? user.roles|json_encode : '' }}</td>
                                <td class="px-8 whitespace-nowrap">
                                    <div class="flex flex-row justify-end gap-2">
                                        <a href="{{ path('profile_view', {'id': user.id }) }}" class="py-2 px-4 border border-gray-300 shadow text-sm font-medium rounded-lg text-gray-500 bg-white hover:text-white hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-all duration-300">View page</a>
                                        <a href="{{ path('app_user_show', {'id': user.id}) }}" class="py-2 px-4 border border-gray-300 shadow text-sm font-medium rounded-lg text-gray-500 bg-white hover:text-white hover:bg-black focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition-all duration-300">Show</a>
                                        {{ include('admin/user/_delete_form.html.twig') }}
                                    </div>
                                </td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="10" class="px-8 py-4 whitespace-nowrap text-center text-sm text-gray-500">No records found</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </section>
    </main>
{% endblock %}