{# templates/admin_modals/edit_user_modal.html #}
<div id="edit-user-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[60] 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-lg 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">
            <div>
                <h3 class="text-2xl font-bold text-white">Configure User</h3>
                <p class="text-sm text-blue-400 font-bold tracking-widest uppercase mt-1" id="modal-username"></p>
            </div>
            <div class="p-3 bg-blue-500/10 rounded-2xl border border-blue-500/20">
                <i data-lucide="user-cog" class="h-6 w-6 text-blue-400"></i>
            </div>
        </div>

        <!-- Scrollable content -->
        <div class="flex-1 overflow-y-auto px-8 py-4 space-y-8 custom-scrollbar">
            <input type="hidden" id="modal-user-id">

            <div class="space-y-6">
                <div class="space-y-2">
                    <label for="modal-email"
                        class="block text-[10px] font-black text-zinc-500 uppercase tracking-widest ml-1">Email
                        Address</label>
                    <input type="email" id="modal-email"
                        class="w-full bg-white/[0.02] border border-white/10 rounded-2xl py-4 px-5 text-sm text-zinc-200 outline-none focus:border-blue-500/50 transition-all">
                </div>

                <div class="space-y-2">
                    <label for="modal-new-password"
                        class="block text-[10px] font-black text-zinc-500 uppercase tracking-widest ml-1">Update
                        Password
                        (Optional)</label>
                    <input type="password" id="modal-new-password" placeholder="Leave blank to keep current"
                        class="w-full bg-white/[0.02] border border-white/10 rounded-2xl py-4 px-5 text-sm text-zinc-200 outline-none focus:border-blue-500/50 transition-all">
                </div>

                <div class="grid grid-cols-1 gap-3">
                    {% macro modal_toggle(label, id) %}
                    <div
                        class="flex items-center justify-between p-4 bg-white/[0.03] rounded-2xl border border-white/5 hover:border-white/10 transition-colors">
                        <span class="text-xs font-bold text-zinc-300">{{ label }}</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" id="{{ id }}" class="sr-only peer">
                            <div
                                class="w-11 h-6 bg-zinc-800 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-zinc-400 after:border after:border-zinc-400 after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500 peer-checked:after:bg-white peer-checked:after:border-white">
                            </div>
                        </label>
                    </div>
                    {% endmacro %}

                    {{ modal_toggle('Administrative Privileges', 'modal-is-admin') }}
                    {{ modal_toggle('Account Active Standby', 'modal-is-enabled') }}
                    {{ modal_toggle('Verified Credentials', 'modal-is-verified') }}
                </div>

                <div class="space-y-3 pt-4 border-t border-white/5">
                    <span class="block text-[10px] font-black text-zinc-500 uppercase tracking-widest ml-1">Ban Account</span>
                    <div id="ban-status-display" class="hidden p-3 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-xs font-bold"></div>
                    <div id="ban-form-section" class="space-y-3">
                        <div class="flex gap-3">
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="ban-type" value="permanent" class="rounded-full border-white/20">
                                <span class="text-xs text-zinc-300">Permanent</span>
                            </label>
                            <label class="flex items-center gap-2 cursor-pointer">
                                <input type="radio" name="ban-type" value="temporary" class="rounded-full border-white/20">
                                <span class="text-xs text-zinc-300">Temporary</span>
                            </label>
                        </div>
                        <div id="ban-days-container" class="hidden">
                            <label class="block text-[10px] font-bold text-zinc-500 uppercase tracking-widest ml-1 mb-1">Days</label>
                            <input type="number" id="ban-days-input" min="1" max="3650" value="7"
                                class="w-full bg-white/[0.02] border border-white/10 rounded-2xl py-3 px-4 text-sm text-zinc-200 outline-none focus:border-red-500/50">
                        </div>
                        <button type="button" id="modal-ban-btn" class="w-full py-3 rounded-xl text-[10px] font-black uppercase tracking-widest bg-red-500/20 border border-red-500/30 text-red-400 hover:bg-red-500/30 transition-all">Ban User</button>
                    </div>
                    <button type="button" id="modal-unban-btn" class="hidden w-full py-3 rounded-xl text-[10px] font-black uppercase tracking-widest bg-green-500/20 border border-green-500/30 text-green-400 hover:bg-green-500/30 transition-all">Unban User</button>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="p-8 pt-4 flex-shrink-0 flex gap-4 border-t border-white/5">
            <button id="modal-cancel-btn"
                class="flex-1 glass-button py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest text-zinc-400 hover:text-white transition-all">Cancel</button>
            <button type="button" id="modal-save-btn"
                class="flex-[2] glass-button no-hover-lift py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest text-white">Save changes</button>
        </div>
    </div>
</div>