{# templates/admin_modals/user_management_modal.html #}
<div id="user-management-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-50 p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition" id="user-management-backdrop"></div>
    <div
        class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-4xl h-auto max-h-[85vh] border border-white/10 modal-content-transition relative flex flex-col overflow-hidden">

        <!-- Header -->
        <div class="p-8 pb-4 flex-shrink-0 bg-white/[0.02] border-b border-white/5">
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center">
                    <div class="p-2.5 bg-blue-500/10 rounded-xl border border-blue-500/20 mr-4 shadow-sm">
                        <i data-lucide="users" class="h-6 w-6 text-blue-400"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-white">User Management</h3>
                        <p class="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-black">Identity & Access
                            Control</p>
                    </div>
                </div>
                <button type="button"
                    class="close-modal-btn p-3 bg-white/[0.02] hover:bg-red-500/20 border border-white/5 hover:border-red-500/30 rounded-2xl text-zinc-500 hover:text-red-400 transition-all">
                    <i data-lucide="x" class="h-5 w-5"></i>
                </button>
            </div>

            {# User Search Bar #}
            <div class="relative group">
                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                    <i data-lucide="search"
                        class="h-4 w-4 text-zinc-500 group-focus-within:text-blue-400 transition-colors"></i>
                </div>
                <input type="text" id="user-search-input" placeholder="Search users by name or email..."
                    class="w-full bg-white/[0.02] border border-white/5 focus:border-blue-500/30 rounded-2xl py-3.5 pl-11 pr-4 text-sm text-zinc-200 placeholder:text-zinc-600 outline-none transition-all">
            </div>
        </div>

        <!-- Scrollable Body -->
        <div class="flex-1 overflow-y-auto px-4 md:px-8 py-4 custom-scrollbar">
            {# Mobile User Stack #}
            <div class="block sm:hidden space-y-4">
                {% for user in users %}
                <div class="glass-panel p-5 rounded-3xl border border-white/5 space-y-5 bg-white/[0.02] user-mgmt-card" data-username="{{ user.username|lower }}" data-email="{{ user.email|lower }}">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center min-w-0">
                            {% if user.profile_picture and user.profile_picture != 'default_avatar.png' %}
                            <img src="{{ url_for('static', filename=user.profile_picture) }}"
                                class="h-12 w-12 rounded-2xl object-cover border border-white/10 shadow-inner flex-shrink-0"
                                alt="{{ user.username }}">
                            {% else %}
                            <div
                                class="h-12 w-12 rounded-2xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/10 flex items-center justify-center text-blue-400 font-bold shadow-inner flex-shrink-0">
                                {{ user.username[0]|upper }}
                            </div>
                            {% endif %}
                            <div class="ml-4 min-w-0">
                                <div class="text-base font-bold text-white truncate">{{ user.username }}</div>
                                <div class="text-[10px] text-zinc-500 font-mono truncate">{{ user.email }}</div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2">
                            <button data-user-id="{{ user.id }}" data-username="{{ user.username }}"
                                class="view-trusted-ips-btn p-3.5 rounded-2xl bg-blue-500/10 border border-blue-500/20 text-blue-400 transition-transform"
                                title="View Trusted IPs">
                                <i data-lucide="network" class="h-5 w-5"></i>
                            </button>
                            <button data-user-id="{{ user.id }}" data-username="{{ user.username }}"
                                class="manage-sub-btn p-3.5 rounded-2xl bg-purple-500/10 border border-purple-500/20 text-purple-400 transition-transform"
                                title="Manage Subscription">
                                <i data-lucide="sparkles" class="h-5 w-5"></i>
                            </button>
                            <button data-user-id="{{ user.id }}"
                                class="edit-user-btn p-3.5 rounded-2xl bg-blue-500/10 border border-blue-500/20 text-blue-400 transition-transform"
                                title="Edit User">
                                <i data-lucide="settings-2" class="h-5 w-5"></i>
                            </button>
                        </div>
                    </div>

                    <div class="flex items-center justify-between pt-4 border-t border-white/5">
                        <div class="flex items-center gap-2">
                            {% if user.is_admin %}
                            <span
                                class="px-3 py-1 rounded-lg bg-red-500/10 border border-red-500/20 text-[10px] font-black uppercase tracking-widest text-red-400 shadow-sm">Admin</span>
                            {% else %}
                            <span
                                class="px-3 py-1 rounded-lg bg-blue-500/10 border border-blue-500/20 text-[10px] font-black uppercase tracking-widest text-blue-400 shadow-sm">User</span>
                            {% endif %}
                            {% if user.is_pro %}
                            <span
                                class="px-3 py-1 rounded-lg bg-purple-500/10 border border-purple-500/20 text-[10px] font-black uppercase tracking-widest text-purple-400 shadow-sm flex items-center gap-1"><i
                                    data-lucide="sparkles" class="h-3 w-3"></i> Pro</span>
                            {% endif %}
                        </div>
                        <div class="flex flex-col items-end gap-1.5">
                            <div class="flex items-center">
                                <div
                                    class="h-2 w-2 rounded-full {% if user.is_enabled %}bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.4)]{% else %}bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]{% endif %} mr-2">
                                </div>
                                <span
                                    class="text-[10px] font-black uppercase tracking-widest {% if user.is_enabled %}text-green-500{% else %}text-red-500{% endif %}">
                                    {% if user.is_enabled %}Active{% else %}Suspended{% endif %}
                                </span>
                            </div>
                            {% if user.is_verified %}
                            <div class="flex items-center opacity-80">
                                <i data-lucide="check-circle-2" class="h-3 w-3 text-blue-400 mr-1.5"></i>
                                <span
                                    class="text-[10px] font-black uppercase tracking-widest text-blue-400">Verified</span>
                            </div>
                            {% else %}
                            <div class="flex items-center opacity-40">
                                <i data-lucide="circle" class="h-3 w-3 text-zinc-500 mr-1.5"></i>
                                <span
                                    class="text-[10px] font-black uppercase tracking-widest text-zinc-500">Unverified</span>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            {# Desktop Table #}
            <div class="hidden sm:block overflow-hidden modal-radius-lg border border-white/5 bg-transparent">
                <table class="w-full text-left border-collapse">
                    <thead class="bg-white/[0.03] text-[10px] uppercase tracking-widest font-black text-zinc-500">
                        <tr>
                            <th class="px-6 py-5 border-b border-white/5">Identity</th>
                            <th class="px-6 py-5 border-b border-white/5">Permissions</th>
                            <th class="px-6 py-5 border-b border-white/5">Status</th>
                            <th class="px-6 py-5 border-b border-white/5 text-right">Operations</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5">
                        {% for user in users %}
                        <tr class="bg-white/[0.02] hover:bg-white/[0.05] transition-all group user-mgmt-row" data-username="{{ user.username|lower }}" data-email="{{ user.email|lower }}">
                            <td class="px-6 py-6">
                                <div class="flex items-center">
                                    {% if user.profile_picture and user.profile_picture != 'default_avatar.png' %}
                                    <img src="{{ url_for('static', filename=user.profile_picture) }}"
                                        class="h-10 w-10 rounded-xl object-cover border border-white/10 shadow-inner flex-shrink-0"
                                        alt="{{ user.username }}">
                                    {% else %}
                                    <div
                                        class="h-10 w-10 rounded-xl bg-gradient-to-br from-blue-500/20 to-purple-500/20 border border-white/10 flex items-center justify-center text-blue-400 font-bold shadow-inner flex-shrink-0">
                                        {{ user.username[0]|upper }}
                                    </div>
                                    {% endif %}
                                    <div class="ml-4 min-w-0">
                                        <div class="text-sm font-bold text-white truncate">{{ user.username }}</div>
                                        <div
                                            class="text-[10px] text-zinc-500 font-mono truncate max-w-[120px] lg:max-w-none">
                                            {{ user.email }}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-6">
                                <div class="flex items-center gap-2">
                                    {% if user.is_admin %}
                                    <span
                                        class="px-2.5 py-1 rounded-lg bg-red-500/10 border border-red-500/20 text-[10px] font-black uppercase tracking-widest text-red-400 shadow-sm">Admin</span>
                                    {% else %}
                                    <span
                                        class="px-2.5 py-1 rounded-lg bg-blue-500/10 border border-blue-500/20 text-[10px] font-black uppercase tracking-widest text-blue-400 shadow-sm">User</span>
                                    {% endif %}
                                    {% if user.is_pro %}
                                    <span
                                        class="px-2.5 py-1 rounded-lg bg-purple-500/10 border border-purple-500/20 text-[10px] font-black uppercase tracking-widest text-purple-400 shadow-sm flex items-center gap-1"><i
                                            data-lucide="sparkles" class="h-3 w-3"></i> Pro</span>
                                    {% endif %}
                                </div>
                            </td>
                            <td class="px-6 py-6">
                                <div class="flex items-center gap-3">
                                    <div class="flex flex-col gap-1">
                                        <div class="flex items-center">
                                            <div
                                                class="h-1.5 w-1.5 rounded-full {% if user.is_enabled %}bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.4)]{% else %}bg-red-500 shadow-[0_0_8px_rgba(239,68,68,0.4)]{% endif %} mr-2">
                                            </div>
                                            <span
                                                class="text-[10px] font-black uppercase tracking-widest {% if user.is_enabled %}text-green-500{% else %}text-red-500{% endif %}">
                                                {% if user.is_enabled %}Active{% else %}Suspended{% endif %}
                                            </span>
                                        </div>
                                        {% if user.is_verified %}
                                        <div class="flex items-center opacity-60">
                                            <i data-lucide="check-circle-2" class="h-2.5 w-2.5 text-blue-400 mr-2"></i>
                                            <span
                                                class="text-[8px] font-black uppercase tracking-widest text-blue-400">Verified</span>
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-6 text-right">
                                <div class="flex items-center justify-end gap-2 text-right">
                                    <button data-user-id="{{ user.id }}" data-username="{{ user.username }}"
                                        class="view-trusted-ips-btn p-2.5 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 hover:bg-blue-500/20 transition-all shadow-sm"
                                        title="View Trusted IPs">
                                        <i data-lucide="network" class="h-4 w-4"></i>
                                    </button>
                                    <button data-user-id="{{ user.id }}" data-username="{{ user.username }}"
                                        class="manage-sub-btn p-2.5 rounded-xl bg-purple-500/10 border border-purple-500/20 text-purple-400 hover:bg-purple-500/20 transition-all shadow-sm"
                                        title="Manage Subscription">
                                        <i data-lucide="sparkles" class="h-4 w-4"></i>
                                    </button>
                                    <button data-user-id="{{ user.id }}"
                                        class="edit-user-btn p-2.5 rounded-xl bg-blue-500/10 border border-blue-500/20 text-blue-400 hover:bg-blue-500/20 transition-all shadow-sm"
                                        title="Edit User">
                                        <i data-lucide="settings-2" class="h-4 w-4"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Footer -->
        <div class="p-8 pt-4 flex-shrink-0 flex justify-end border-t border-white/5">
            <button type="button"
                class="close-modal-btn glass-button px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-400 hover:text-white">Close</button>
        </div>
    </div>
</div>