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

{% block title %}{{ 'lang.myAccount'|trans }} — {{ 'lang.profile'|trans }}{% endblock %}

{% block body_class %}bg-gray-50{% endblock %}

{% block body %}
<div class="container mx-auto px-4 py-8">
    <div class="max-w-4xl mx-auto">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
            <h1 class="text-2xl font-bold text-gray-900">{{ 'lang.myAccount'|trans }}</h1>
            <a href="{{ path('app_user_new') }}" class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 bg-primary hover:bg-primary-light text-white text-sm font-medium rounded-lg transition-colors">
                <i class="fas fa-plus text-xs"></i>
                {{ 'lang.newUser'|trans }}
            </a>
        </div>

        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">{{ 'lang.personalInformation'|trans }}</th>
                            <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">{{ 'lang.email'|trans }}</th>
                            <th scope="col" class="px-4 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">{{ 'lang.company'|trans }}</th>
                            <th scope="col" class="px-4 py-3 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">{{ 'lang.actions'|trans }}</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-100 p-0 ">
                        {% for u in users %}
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="px-4 py-3">
                                <div class="flex items-center gap-3">
                                    {% if u.myPicture %}
                                        <img src="{{ asset('images') }}/{{ u.myPicture }}" alt="" class="w-9 h-9 rounded-full object-cover border border-gray-200">
                                    {% else %}
                                        <div class="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                            <i class="fas fa-user text-sm"></i>
                                        </div>
                                    {% endif %}
                                    <span class="font-medium text-gray-900">{{ u.firstName }} {{ u.lastName }}</span>
                                </div>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-600">{{ u.email }}</td>
                            <td class="px-4 py-3 text-sm text-gray-600">{{ u.company|default('—') }}</td>
                            <td class="px-4 py-3 text-right">
                                <div class="flex items-center justify-end gap-2">
                                    <a href="{{ path('app_user_show', {'id': u.id}) }}" class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-primary hover:bg-primary/10 rounded-lg transition-colors">
                                        <i class="fas fa-eye"></i>
                                        {{ 'lang.preview'|trans }}
                                    </a>
                                    <a href="{{ path('app_user_edit', {'id': u.id}) }}" class="inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                                        <i class="fas fa-pen"></i>
                                        {{ 'lang.edit'|trans }}
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="4" class="px-4 py-12 text-center text-gray-500">{{ 'lang.no'|trans }} {{ 'lang.personalInformation'|trans|lower }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}