{{define "user_list"}}
{{template "header" .}}
<section class="max-w-6xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-8">
        <h2 class="text-3xl font-bold text-gray-900">{{index .Tr "user_list_title"}}</h2>
        <a href="/admin/users/new"
            class="inline-flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            {{index .Tr "user_new"}}
        </a>
    </div>

    {{if .Success}}
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6">{{.Success}}</div>
    {{end}}
    {{if .Error}}
    <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">{{.Error}}</div>
    {{end}}

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <table class="w-full text-left">
            <thead class="bg-gray-50 border-b border-gray-200">
                <tr>
                    <th class="px-4 py-3 text-sm font-semibold text-gray-600">{{index .Tr "user_col_username"}}</th>
                    <th class="px-4 py-3 text-sm font-semibold text-gray-600">{{index .Tr "user_col_display"}}</th>
                    <th class="px-4 py-3 text-sm font-semibold text-gray-600">{{index .Tr "user_col_email"}}</th>
                    <th class="px-4 py-3 text-sm font-semibold text-gray-600">{{index .Tr "user_col_role"}}</th>
                    <th class="px-4 py-3 text-sm font-semibold text-gray-600">{{index .Tr "user_col_status"}}</th>
                    <th class="px-4 py-3 text-sm font-semibold text-gray-600">{{index .Tr "user_col_created"}}</th>
                    <th class="px-4 py-3 text-sm font-semibold text-gray-600 text-right">{{index .Tr "user_col_actions"}}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {{range .Users}}
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 text-sm text-gray-800 font-medium">
                        <div class="flex items-center gap-2">
                            {{if .Avatar}}
                                <img src="/uploads/avatars/{{.Avatar}}" alt="" class="w-7 h-7 rounded-full object-cover">
                            {{else}}
                                <span class="w-7 h-7 rounded-full bg-gray-200 text-gray-500 flex items-center justify-center text-xs font-bold">
                                    {{if .DisplayName}}{{slice .DisplayName 0 1}}{{else}}{{slice .Username 0 1}}{{end}}
                                </span>
                            {{end}}
                            {{.Username}}
                        </div>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-700">{{if .DisplayName}}{{.DisplayName}}{{else}}—{{end}}</td>
                    <td class="px-4 py-3 text-sm text-gray-500">{{if .Email}}{{.Email}}{{else}}—{{end}}</td>
                    <td class="px-4 py-3 text-sm">
                        <span class="text-xs {{.RoleBadge}} px-2 py-1 rounded">{{.RoleLabel}}</span>
                    </td>
                    <td class="px-4 py-3 text-sm">
                        <span class="text-xs {{.StatusBadge}} px-2 py-1 rounded">{{.StatusLabel}}</span>
                    </td>
                    <td class="px-4 py-3 text-sm text-gray-500">{{.CreatedAt.Format "2006-01-02 15:04"}}</td>
                    <td class="px-4 py-3 text-sm text-right whitespace-nowrap">
                        <a href="/admin/users/{{.ID}}/edit"
                            class="text-blue-600 hover:text-blue-800 font-medium mr-3">{{index $.Tr "article_edit"}}</a>
                        <form action="/admin/users/{{.ID}}/delete" method="post" class="inline"
                            onsubmit="return confirm('{{index $.Tr "user_delete_confirm"}}');">
                            <button type="submit"
                                class="text-red-600 hover:text-red-800 font-medium cursor-pointer bg-transparent border-none">{{index $.Tr "settings_delete"}}</button>
                        </form>
                    </td>
                </tr>
                {{else}}
                <tr>
                    <td colspan="7" class="px-4 py-12 text-center text-gray-500">{{index .Tr "user_empty"}}</td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
</section>
{{template "footer" .}}
{{end}}