{# templates/admin_modals/trusted_ips_modal.html #}
<div id="trusted-ips-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[70] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition"></div>
    <div
        class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-2xl 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 flex items-center justify-between border-b border-white/5">
            <div>
                <h3 class="text-2xl font-bold text-white">Trusted IPs</h3>
                <p class="text-sm text-blue-400 font-bold tracking-widest uppercase mt-1" id="trusted-ips-username"></p>
            </div>
            <div class="p-3 bg-blue-500/10 rounded-2xl border border-blue-500/20">
                <i data-lucide="shield" class="h-6 w-6 text-blue-400"></i>
            </div>
        </div>

        <!-- Scrollable content -->
        <div class="flex-1 overflow-y-auto p-8 custom-scrollbar relative">
            <div id="trusted-ips-loading"
                class="absolute inset-0 flex flex-col items-center justify-center bg-transparent backdrop-blur-sm z-10">
                <i data-lucide="loader-2" class="h-8 w-8 text-blue-500 animate-spin mb-4"></i>
                <p class="text-xs font-bold text-zinc-400 uppercase tracking-widest">Loading IPs...</p>
            </div>

            <div id="trusted-ips-empty"
                class="hidden flex flex-col items-center justify-center h-full text-center py-12">
                <div class="p-4 bg-zinc-900/50 rounded-full border border-white/5 mb-4">
                    <i data-lucide="shield-off" class="h-8 w-8 text-zinc-600"></i>
                </div>
                <h4 class="text-lg font-bold text-white mb-2">No Trusted IPs</h4>
                <p class="text-xs text-zinc-400 font-bold uppercase tracking-widest leading-relaxed max-w-xs">
                    This user currently has no active trusted IP addresses.
                </p>
            </div>

            <div class="space-y-3" id="trusted-ips-list">
                <!-- IP items injected by JS -->
            </div>
        </div>

        <!-- Footer -->
        <div class="p-8 pt-4 flex-shrink-0 flex gap-4 border-t border-white/5 bg-white/[0.02]">
            <button type="button" id="trusted-ips-close-btn"
                class="close-modal-btn w-full glass-button no-hover-lift py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest text-zinc-400 hover:text-white">Close</button>
        </div>
    </div>
</div>