{% extends 'admin/layout.html.twig' %}
{% block title %}Users - KitscoApp{% endblock %}
{% block page_title %}Users{% endblock %}

{% block content %}
<div class="flex flex-wrap justify-between items-center mb-6 gap-3">
    <p class="text-gray-500 text-sm">Manage system users and their roles</p>
    <a href="{{ path('admin_user_new') }}" class="inline-flex items-center gap-1.5 bg-kitsco-accent hover:bg-kitsco-dark text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm">
        <i class="bi bi-plus-circle"></i> New User
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                <tr>
                    <th class="px-4 py-3 text-left font-medium">Name</th>
                    <th class="px-4 py-3 text-left font-medium">Email</th>
                    <th class="px-4 py-3 text-left font-medium">Roles</th>
                    <th class="px-4 py-3 text-left font-medium">Status</th>
                    <th class="px-4 py-3 text-right font-medium">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for user in users %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-4 py-3 font-semibold">{{ user.fullName }}</td>
                    <td class="px-4 py-3 text-gray-500">{{ user.email }}</td>
                    <td class="px-4 py-3">
                        <div class="flex flex-wrap gap-1">
                            {% for role in user.roles %}
                                {% if role != 'ROLE_USER' %}
                                    {% set roleColors = {
                                        'ROLE_SUPER_ADMIN': 'bg-purple-100 text-purple-700',
                                        'ROLE_ADMIN': 'bg-red-100 text-red-700',
                                        'ROLE_MANAGER': 'bg-orange-100 text-orange-700',
                                        'ROLE_ACCOUNTANT': 'bg-blue-100 text-blue-700',
                                        'ROLE_SHOPKEEPER': 'bg-green-100 text-green-700',
                                        'ROLE_CUSTOMER': 'bg-gray-100 text-gray-700'
                                    } %}
                                    {% set roleLabels = {
                                        'ROLE_SUPER_ADMIN': 'Super Admin',
                                        'ROLE_ADMIN': 'Admin',
                                        'ROLE_MANAGER': 'Manager',
                                        'ROLE_ACCOUNTANT': 'Accountant',
                                        'ROLE_SHOPKEEPER': 'Shopkeeper',
                                        'ROLE_CUSTOMER': 'Customer'
                                    } %}
                                    <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium {{ roleColors[role] ?? 'bg-gray-100 text-gray-600' }}">
                                        {{ roleLabels[role] ?? role|replace({'ROLE_': ''})|capitalize }}
                                    </span>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </td>
                    <td class="px-4 py-3">
                        {% if user.isActive %}
                            <span class="inline-block px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">Active</span>
                        {% else %}
                            <span class="inline-block px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-500">Inactive</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-right">
                        <div class="flex items-center justify-end gap-1">
                            <a href="{{ path('admin_user_edit', {id: user.id}) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50 transition-colors" title="Edit">
                                <i class="bi bi-pencil text-sm"></i>
                            </a>
                            {% if user != app.user %}
                                <form action="{{ path('admin_user_toggle_active', {id: user.id}) }}" method="post" class="inline">
                                    <input type="hidden" name="_token" value="{{ csrf_token('toggle' ~ user.id) }}">
                                    <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50 transition-colors" title="{{ user.isActive ? 'Deactivate' : 'Activate' }}">
                                        <i class="bi bi-{{ user.isActive ? 'toggle-on text-green-600' : 'toggle-off' }} text-sm"></i>
                                    </button>
                                </form>
                                <form action="{{ path('admin_user_delete', {id: user.id}) }}" method="post" class="inline">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ user.id) }}">
                                    <button type="button" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-red-300 text-red-500 hover:bg-red-50 transition-colors" title="Delete"
                                            onclick="window.confirmDialog?.confirmForm(this.closest('form'), 'Delete User', 'Are you sure you want to delete this user?', 'Delete', 'danger')">
                                        <i class="bi bi-trash text-sm"></i>
                                    </button>
                                </form>
                            {% else %}
                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-200 text-gray-300 cursor-not-allowed" title="Cannot modify yourself">
                                    <i class="bi bi-toggle-on text-sm"></i>
                                </span>
                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-200 text-gray-300 cursor-not-allowed" title="Cannot delete yourself">
                                    <i class="bi bi-trash text-sm"></i>
                                </span>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="5" class="px-4 py-16 text-center">
                        <div class="text-gray-400">
                            <i class="bi bi-people text-4xl"></i>
                            <p class="mt-3 font-medium text-gray-500">No users found</p>
                            <a href="{{ path('admin_user_new') }}" class="inline-flex items-center gap-1.5 mt-4 bg-kitsco-accent text-white font-medium py-2 px-4 rounded-lg text-sm">
                                <i class="bi bi-plus-circle"></i> Create User
                            </a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}