{% extends "base.html" %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <h2 class="text-2xl font-bold mb-8 text-center sm:text-left">OpenVPN User Manager</h2>

    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-6">
        <div class="bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-700 transition-colors duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="tex text-xs font-medium text-gray-400 transition-colors duration-200">Online</p>
                    <p class="text-lg font-semibold text-green-400 transition-colors duration-200" id="onlineUsersCount">
                        <svg class="animate-spin h-5 w-5 mt-2 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                    </p>
                </div>
                <div class="p-2 rounded-full bg-green-900/20 text-green-400 transition-colors duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M5.05 3.636a1 1 0 010 1.414 7 7 0 000 9.9 1 1 0 11-1.414 1.414 9 9 0 010-12.728 1 1 0 011.414 0zm9.9 0a1 1 0 011.414 0 9 9 0 010 12.728 1 1 0 11-1.414-1.414 7 7 0 000-9.9 1 1 0 010-1.414zM7.879 6.464a1 1 0 010 1.414 3 3 0 000 4.243 1 1 0 11-1.415 1.414 5 5 0 010-7.07 1 1 0 011.415 0zm4.242 0a1 1 0 011.415 0 5 5 0 010 7.072 1 1 0 01-1.415-1.415 3 3 0 000-4.242 1 1 0 010-1.415zM10 9a1 1 0 011 1v.01a1 1 0 11-2 0V10a1 1 0 011-1z" clip-rule="evenodd" />
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-700 transition-colors duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="tex text-xs font-medium text-gray-400 transition-colors duration-200">Total Users</p>
                    <p class="text-lg font-semibold text-blue-400 transition-colors duration-200" id="totalUsersCount">
                        <svg class="animate-spin h-5 w-5 mt-2 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                    </p>
                </div>
                <div class="p-2 rounded-full bg-blue-900/20 text-blue-400 transition-colors duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-700 transition-colors duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="tex text-xs font-medium text-gray-400 transition-colors duration-200">Expired</p>
                    <p class="text-lg font-semibold text-amber-400 transition-colors duration-200" id="expiredUsersCount">
                        <svg class="animate-spin h-5 w-5 mt-2 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                    </p>
                </div>
                <div class="p-2 rounded-full bg-amber-900/20 text-amber-400 transition-colors duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-700 transition-colors duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="tex text-xs font-medium text-gray-400 transition-colors duration-200">Disabled</p>
                    <p class="text-lg font-semibold text-red-400 transition-colors duration-200" id="disabledUsersCount">
                        <svg class="animate-spin h-5 w-5 mt-2 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                    </p>
                </div>
                <div class="p-2 rounded-full bg-red-900/20 text-red-400 transition-colors duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" />
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-700 transition-colors duration-200 relative group">
            <div class="flex items-center justify-between">
                <div>
                    <p class="tex text-xs font-medium text-gray-400 transition-colors duration-200">Total Traffic</p>
                    <p class="textera text-lg font-semibold text-purple-400 transition-colors duration-200" style="font-size: 1.5rem;" id="totalTraffic">
                        <svg class="animate-spin h-5 w-5 mt-2 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                    </p>
                </div>
                <div class="textera p-2 rounded-full bg-purple-900/20 text-blue-400 transition-colors duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
                    </svg>
                </div>
            </div>

            <div class="bg-tarikh absolute top-0 left-0 w-full h-full bg-black bg-opacity-70 rounded-lg flex flex-col justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 p-3">
                <p class="text-sm font-medium text-white">Total Download: <span id="uploadTraffic"></span></p>
                <p class="text-sm font-medium text-white">Total Upload: <span id="downloadTraffic"></span></p>
            </div>
        </div>

        <div class="bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-700 transition-colors duration-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="tex text-xs font-medium text-gray-400 transition-colors duration-200">Active Nodes</p>
                    <p class="text-lg font-semibold text-indigo-400 transition-colors duration-200" style="font-size: 1.5rem;" id="activeNodesCount">
                        <svg class="animate-spin h-5 w-5 mt-2 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                        </svg>
                    </p>
                </div>
                <div class="p-2 rounded-full bg-indigo-900/20 text-indigo-400 transition-colors duration-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <div class="mb-8">
        <button onclick="openAddUserModal()" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-6 py-2 rounded-lg flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
            </svg>
            Add User
        </button>
    </div>

    <div id="addUserModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
        <div class="flex items-center justify-center min-h-screen">
            <div class="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md">
                <h2 class="text-xl font-bold mb-10">Add User</h2>
                <form action="{{ url_for('add_user') }}" method="post" class="flex flex-col gap-4">
                    <input type="text" name="username" placeholder="Username" class="w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                    
                    <div class="mb-0">
                        <label for="edit_expiry_date" class="block text-sm font-medium mb-2">Expiry Date</label>
                        <input type="date" name="expiry_date" class="bg-tarikh w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                   
                    <div class="mb-0"> 
                        <label for="edit_max_clients" class="block text-sm font-medium mb-2">Max Clients</label>
                        <input type="number" name="max_clients" placeholder="Max Clients (Default: 1)" min="1" class="w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" value="1">
                    </div>
                    
                    <div class="mb-0">
                        <label for="data_limit" class="block text-sm font-medium mb-2">Data Limit</label>
                        <div class="flex gap-2">
                            <input type="number" id="data_limit" name="data_limit" min="1" 
                                   class="w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" 
                                   placeholder="Leave empty for unlimited">
                            <div class="flex items-center gap-2 bg-gray-700 px-3 rounded-lg">
                                <label class="flex items-center gap-1 text-sm">
                                    <input type="radio" name="data_limit_unit" value="MB" class="focus:ring-blue-500"> MB
                                </label>
                                <label class="flex items-center gap-1 text-sm">
                                    <input type="radio" name="data_limit_unit" value="GB" checked class="focus:ring-blue-500"> GB
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <label class="block text-sm font-medium mb-2">Select Nodes</label>
                        <div class="bg-gray-700 p-3 rounded-lg max-h-40 overflow-y-auto custom-scroll" id="addNodesContainer">
                        </div>
                    </div>
                    
                    <button type="submit" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-4 py-2 rounded-lg w-full flex items-center justify-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
                        </svg>
                        Add User
                    </button>
                </form>
                <button onclick="closeAddUserModal()" class="mt-4 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg w-full flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                    Close
                </button>
            </div>
        </div>
    </div>

    <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-8">
        <h3 class="text-xl font-bold mb-4">Search Users</h3>
        <input type="text" id="searchInput" placeholder="Search by username..." class="w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" oninput="filterUsers()">
    </div>

    <div class="bg-gray-800 p-6 rounded-lg shadow-lg">
        <h3 class="text-xl font-bold mb-4">User List</h3>
        
        <div class="sm:hidden space-y-2" id="userListMobile">
            {% if users %}
                {% for user in users %}
                    <div class="border-b border-gray-700 group user-item p-2">
                        <div class="flex justify-between items-center">
                            <div class="bg-gradient-to-r from-purple-600 to-blue-600 p-2 rounded-lg flex items-center gap-2">
                                <span class="w-2 h-2 rounded-full status-circle status-circle-{{ user.username }} {% if user.active_connections > 0 %}online{% else %}offline{% endif %}"></span>
                                <span class="text-sm font-medium username">{{ user.username }}</span>
                                <span class="text-xs">
                                    {% if user.is_expired %}
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                                        </svg>
                                    {% elif user.is_data_limited or not user.is_active %}
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-orange-500" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                                        </svg>
                                    {% else %}
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 011.414 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293z" clip-rule="evenodd" />
                                        </svg>
                                    {% endif %}
                                </span>
                            </div>
                           <div class="bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg text-center connection-badge" data-username="{{ user.username }}" style="display: inline-block; padding: 0.25rem 0.5rem;">
                                <span class="text-xs text-white user-connections-{{ user.username }}">👤{{ user.max_clients }}/{{ user.active_connections }}</span>
                            </div>
                            <div class="flex items-center gap-2">
                                <label class="switch">
                                    <input type="checkbox" {% if user.is_active and not user.is_expired and not user.is_data_limited %}checked{% endif %} {% if user.is_expired or user.is_data_limited %}disabled{% endif %} onchange="toggleUserStatus('{{ user.username }}', this.checked)">
                                    <span class="slider round {% if user.is_expired or user.is_data_limited %}disabled{% endif %}"></span>
                                </label>
                            </div>
                        </div>

                        <div class="mt-2 flex justify-between items-center gap-2">
                            <div class="bg-gradient-to-r from-purple-600 to-blue-600 p-2 rounded-lg flex-1 text-center">
                                <span class="text-xs text-white flex items-center justify-center gap-1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
                                    </svg>
                                    {{ user.expiry_date if user.expiry_date != "Unlimited" else "Unlimited" }}
                                </span>
                            </div>
                            <div class="bg-gradient-to-r from-purple-600 to-blue-600 p-2 rounded-lg flex-1 text-center relative hover-traffic">
                                <div class="text-xs text-white flex items-center justify-center gap-2 hajm" id="total-mobile-{{ user.username }}">
                                    {% set total_bytes = user.download_bytes + user.upload_bytes %}
                                    {% if total_bytes < 1024**2 %}
                                        {{ "%.2f"|format(total_bytes/1024) }} KB
                                    {% elif total_bytes < 1024**3 %}
                                        {{ "%.2f"|format(total_bytes/(1024**2)) }} MB
                                    {% else %}
                                        {{ "%.2f"|format(total_bytes/(1024**3)) }} GB
                                    {% endif %}
                                    {% if user.data_limit %}
                                        / {{ user.data_limit }} {{ user.data_limit_unit }}
                                    {% else %}
                                        <span class="text-xs opacity-70">/  Unlimited</span>
                                    {% endif %}
                                </div>
                                <div class="traffic-details">
                                    <span id="download-details-mobile-{{ user.username }}">⬇ {{ "%.2f"|format(user.download_bytes/(1024**2)) }} MB</span>
                                    <span id="upload-details-mobile-{{ user.username }}">⬆ {{ "%.2f"|format(user.upload_bytes/(1024**2)) }} MB</span>
                                </div>
                            </div>
                        </div>

                        <div class="mt-2 flex justify-between items-center">
                            <div class="flex gap-2">
                                <a href="{{ url_for('download_ovpn', username=user.username) }}" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white p-2 rounded-lg flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                </a>
                                <button onclick="openEditModal('{{ user.username }}', '{{ user.expiry_date if user.expiry_date != 'Unlimited' else '' }}', '{{ user.max_clients if user.max_clients else 1 }}', '{{ user.data_limit if user.data_limit else '' }}', '{{ user.data_limit_unit if user.data_limit_unit else 'GB' }}')" class="bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-700 hover:to-orange-700 text-white p-2 rounded-lg flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                                    </svg>
                                </button>
                            </div>
                            <div class="flex gap-2">
                                <a href="{{ url_for('user_subpage', username=user.username) }}" class="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 to-emerald-600 text-white p-2 rounded-lg flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd" />
                                    </svg>
                                </a>
                                <a href="#" onclick="openDeleteConfirmModal('{{ user.username }}')" class="bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white p-2 rounded-lg flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="text-center py-2 text-sm">No users found.</div>
            {% endif %}
        </div>

        <div class="hidden sm:block">
            <table class="w-full min-w-max">
                <thead>
                    <tr class="bg-gray-700">
                        <th class="px-4 py-2 text-left">Username</th>
                        <th class="px-4 py-2 text-left">Expiry Date</th>
                        <th class="px-4 py-2 text-left">Status</th>
                        <th class="px-4 py-2 text-left">Connection</th>
                        <th class="px-4 py-2 text-left">OVPN File</th>
                        <th class="px-4 py-2 text-left">Actions</th>
                        <th class="px-4 py-2 text-left">Traffic Usage</th>
                    </tr>
                </thead>
                <tbody id="userListDesktop">
                    {% if users %}
                        {% for user in users %}
                            <tr class="border-b border-gray-700 hover:bg-gray-750 user-item">
                                <td class="px-4 py-2">
                                    <div class="bg-gradient-to-r from-purple-600 to-blue-600 p-2 rounded-lg flex items-center gap-2">
                                        <span class="text-sm text-white username">{{ user.username }}</span>
                                        {% if user.is_expired %}
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-red-500" viewBox="0 0 20 20" fill="currentColor">
                                                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                                            </svg>
                                        {% elif user.is_data_limited or not user.is_active %}
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-orange-500" viewBox="0 0 20 20" fill="currentColor">
                                                <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
                                            </svg>
                                        {% else %}
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-green-500" viewBox="0 0 20 20" fill="currentColor">
                                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 011.414 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293z" clip-rule="evenodd" />
                                            </svg>
                                        {% endif %}
                                    </div>
                                </td>

                                <td class="px-4 py-2">
                                    <div class="bg-gradient-to-r from-purple-600 to-blue-600 p-2 rounded-lg">
                                        <span class="text-sm text-white flex items-center justify-center gap-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
                                            </svg>
                                            {{ user.expiry_date if user.expiry_date != "Unlimited" else "Unlimited" }}
                                        </span>
                                    </div>
                                </td>

                                <td class="px-4 py-2">
                                    <div class="flex items-center gap-2">
                                        <label class="switch">
                                            <input type="checkbox" {% if user.is_active and not user.is_expired and not user.is_data_limited %}checked{% endif %} {% if user.is_expired or user.is_data_limited %}disabled{% endif %} onchange="toggleUserStatus('{{ user.username }}', this.checked)">
                                            <span class="slider round {% if user.is_expired or user.is_data_limited %}disabled{% endif %}"></span>
                                        </label>
                                        {% if user.is_expired %}
                                            <span class="text-sm text-red-500">🔒 Expired</span>
                                        {% elif user.is_data_limited %}
                                            <span class="text-sm text-orange-500">🔒 Data Limit</span>
                                        {% elif not user.is_active %}
                                            <span class="text-sm text-orange-500">🔒 Disabled</span>
                                        {% else %}
                                            <span class="text-sm text-green-500">✅ Active</span>
                                        {% endif %}
                                    </div>
                                </td>

                                <td class="px-4 py-2">
                                    <div class="flex items-center gap-2 connection-badge" data-username="{{ user.username }}">
                                        <span class="w-2 h-2 rounded-full status-circle status-circle-{{ user.username }} {% if user.active_connections > 0 %}online{% else %}offline{% endif %}"></span>
                                        <div class="bg-gradient-to-r from-purple-600 to-blue-600 p-1 rounded-lg">
                                            <span class="text-sm text-white user-connections-{{ user.username }}">👤{{ user.max_clients }}/{{ user.active_connections }}</span>
                                        </div>
                                    </div>
                                </td>

                                <td class="px-4 py-2">
                                    <a href="{{ url_for('download_ovpn', username=user.username) }}" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-4 py-2 rounded-lg inline-block flex items-center justify-center gap-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                        </svg>
                                        Download
                                    </a>
                                </td>

                                <td class="px-4 py-2 flex flex-wrap gap-2">
                                    <a href="{{ url_for('user_subpage', username=user.username) }}" class="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 to-emerald-600 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd" />
                                        </svg>
                                        Sub
                                    </a>
                                    <a href="#" onclick="openDeleteConfirmModal('{{ user.username }}')" class="bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                                        </svg>
                                        Delete
                                    </a>
                                    <button onclick="openEditModal('{{ user.username }}', '{{ user.expiry_date if user.expiry_date != 'Unlimited' else '' }}', '{{ user.max_clients if user.max_clients else 1 }}', '{{ user.data_limit if user.data_limit else '' }}', '{{ user.data_limit_unit if user.data_limit_unit else 'GB' }}')" class="bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-700 to-orange-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-1">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                            <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                                        </svg>
                                        Edit
                                    </button>
                                </td>

                                <td class="px-4 py-2">
                                    <div class="bg-gradient-to-r from-purple-600 to-blue-600 p-2 rounded-lg relative hover-traffic">
                                        <div class="text-sm text-white" id="total-{{ user.username }}">
                                            {% set total_bytes = user.download_bytes + user.upload_bytes %}
                                            {% if total_bytes < 1024**2 %}
                                                {{ "%.2f"|format(total_bytes/1024) }} KB
                                            {% elif total_bytes < 1024**3 %}
                                                {{ "%.2f"|format(total_bytes/(1024**2)) }} MB
                                            {% else %}
                                                {{ "%.2f"|format(total_bytes/(1024**3)) }} GB
                                            {% endif %}
                                            {% if user.data_limit %}
                                                / {{ user.data_limit }} {{ user.data_limit_unit }}
                                            {% else %}
                                                <span class="text-sm text-white">/  Unlimited</span>
                                            {% endif %}
                                        </div>
                                       <div class="traffic-details">
                                            <span id="download-details-{{ user.username }}">
                                                <svg class="inline h-4 w-4 mr-1 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                                                    <path d="M12 8l-4 5h3v7h2v-7h3l-4-5zM3 4v2h18V4H3z"/>
                                                </svg>
                                                {{ "%.2f"|format(user.download_bytes/(1024**2)) }} MB
                                            </span>
                                            <span id="upload-details-{{ user.username }}">
                                                <svg class="inline h-4 w-4 mr-1 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                                                    <path d="M12 16l4-5h-3V4h-2v7H8l4 5zm-9 2v2h18v-2H3z"/>
                                                </svg>
                                                {{ "%.2f"|format(user.upload_bytes/(1024**2)) }} MB
                                            </span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="7" class="px-4 py-2 text-center">No users found.</td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div id="editModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md">
            <h2 class="text-xl font-bold mb-4">Edit User</h2>
            <form id="editForm" method="post" class="mb-6">
                <div class="mb-4">
                    <label for="edit_expiry_date" class="block text-sm font-medium mb-2">Expiry Date</label>
                    <input type="date" id="edit_expiry_date" name="expiry_date" class="bg-tarikh w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="mb-4">
                    <label for="edit_max_clients" class="block text-sm font-medium mb-2">Max Clients</label>
                    <input type="number" id="edit_max_clients" name="max_clients" min="1" class="w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div class="mb-4">
                    <label for="edit_data_limit" class="block text-sm font-medium mb-2">Data Limit</label>
                    <div class="flex gap-2">
                        <input type="number" id="edit_data_limit" name="data_limit" min="1" 
                               class="w-full px-4 py-2 bg-gray-700 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" 
                               placeholder="Leave empty for unlimited">
                        <div class="flex items-center gap-2 bg-gray-700 px-3 rounded-lg">
                            <label class="flex items-center gap-1 text-sm">
                                <input type="radio" id="edit_data_limit_unit_mb" name="edit_data_limit_unit" value="MB" class="focus:ring-blue-500"> MB
                            </label>
                            <label class="flex items-center gap-1 text-sm">
                                <input type="radio" id="edit_data_limit_unit_gb" name="edit_data_limit_unit" value="GB" checked class="focus:ring-blue-500"> GB
                            </label>
                        </div>
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-2">Select Nodes</label>
                    <div class="bg-gray-700 p-3 rounded-lg max-h-40 overflow-y-auto" id="editNodesContainer">
                    </div>
                </div>
                
                <div class="mb-4 p-4 bg-gray-700 rounded-lg">
                    <h3 class="text-sm font-medium mb-2">Traffic Usage</h3>
                    <div class="grid grid-cols-3 gap-2 text-center">
                        <div class="bg-gray-800 p-2 rounded">
                            <div class="text-xs text-gray-400">Download</div>
                            <div id="edit-upload" class="text-sm">0 MB</div>
                        </div>
                        <div class="bg-gray-800 p-2 rounded">
                            <div class="text-xs text-gray-400">Upload</div>
                            <div id="edit-download" class="text-sm">0 MB</div>
                        </div>
                        <div class="bg-gray-800 p-2 rounded">
                            <div class="text-xs text-gray-400">Total</div>
                            <div id="edit-total" class="text-sm">0 MB</div>
                        </div>
                    </div>
                    <button type="button" onclick="resetUserTraffic()" class="mt-2 w-full bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg text-sm flex items-center justify-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
                        </svg>
                        Reset Traffic
                    </button>
                </div>
                
                <button type="submit" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-4 py-2 rounded-lg w-full flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V6h5a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h5v5.586l-1.293-1.293zM9 4a1 1 0 012 0v2H9V4z" />
                    </svg>
                    Update
                </button>
            </form>
            <button onclick="closeEditModal()" class="mt-4 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg w-full flex items-center justify-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
                Close
            </button>
        </div>
    </div>
</div>

<div id="resetConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md">
            <h2 class="text-xl font-bold mb-4">Confirm Reset Traffic</h2>
            <p class="mb-6" id="resetConfirmText">Are you sure you want to reset traffic for this user?</p>
            
            <div class="flex gap-4">
                <button onclick="confirmResetTraffic()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                    Reset
                </button>
                <button onclick="closeResetConfirmModal()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<div id="deleteConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md">
            <h2 class="text-xl font-bold mb-4">Confirm Delete</h2>
            <p class="mb-6" id="deleteConfirmText">Are you sure you want to delete this user?</p>
            
            <div class="flex gap-4">
                <button onclick="confirmDelete()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                    Delete
                </button>
                <button onclick="closeDeleteConfirmModal()" class="flex-1 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>

<div id="downloadOptionsModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen">
        <div class="bg-gray-800 p-6 rounded-lg shadow-lg w-full max-w-md">
            <h2 class="text-xl font-bold mb-4">Download OVPN File</h2>
            <div id="downloadOptionsList" class="mb-6">
            </div>
            <button onclick="closeDownloadOptionsModal()" class="mt-4 bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-700 hover:to-pink-700 text-white px-4 py-2 rounded-lg w-full flex items-center justify-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                </svg>
                Close
            </button>
        </div>
    </div>
</div>

<style>
.light-theme .tex {
    color:#000000;
}

.light-theme .textera {
    color:rgb(91 47 224);
}

.custom-checkbox {
    position: relative;
    padding-left: 2.5rem;
    border-radius: 1rem;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    user-select: none;
}

.custom-checkbox:has(input:checked) {
    border-color: #374151;
    background: linear-gradient(135deg, #6b46c1, #3b82f6);
}

.light-theme .custom-checkbox:has(input:checked) {
    border-color: #d7dae0;
    background: rgb(214 217 223);
}

.custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.custom-checkbox .checkmark {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    height: 1.25rem;
    width: 1.25rem;
    background-color: #4b5563;
    border: 2px solid #9ca3af;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #8b5cf6;
    border-color: #8b5cf6;
}

.light-theme .custom-checkbox input:checked ~ .checkmark {
    background-color: #000000;
    border-color: #000000;
}

.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark:after {
    display: block;
}

.custom-checkbox input:focus ~ .checkmark {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}

.light-theme .custom-checkbox input:focus ~ .checkmark {
    box-shadow: 0 0 0 3px rgba(13, 19, 25, 0.11);
}

.custom-checkbox span.text-sm {
    padding-left: 0.5rem;
    color: #e5e7eb;
}

.light-theme .custom-checkbox span.text-sm {
    padding-left: 0.8rem;
    color: #000000;
}

.light-theme .bg-tarikh{
    background-color: #ffffff;
    border: 1px solid #d1d5db;
}

.connection-tooltip {
    position: absolute;
    background: rgba(30, 41, 59, 0.95);
    border-radius: 6px;
    padding: 8px 12px;
    color: white;
    font-size: 0.8rem;
    z-index: 100;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    min-width: 120px;
}

.connection-badge:hover .connection-tooltip {
    display: block;
}

.server-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

.server-icon.main {
    color: #8b5cf6;
}

.server-icon.node {
    color: #3b82f6;
}

.node-offline {
    opacity: 0.6;
    filter: grayscale(80%);
}

.node-offline .checkmark {
    border-color: #ef4444 !important;
    background-color: #7f1d1d !important;
}

.node-offline-text {
    color: #ef4444;
    font-size: 0.75rem;
    margin-left: 0.25rem;
}
</style>

<script>
function formatBytes(bytes) {
    if (bytes === 0) return '0 B';
    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
    return `${(bytes / Math.pow(1024, i)).toFixed(i ? 1 : 0)} ${units[i]}`;
}

function loadUserNodes(username) {
    fetch(`/get_user_nodes/${username}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const allowedNodes = data.allowed_nodes;
                fetchNodesForEdit(allowedNodes);
            }
        })
        .catch(error => {
            console.error("Error fetching user nodes:", error);
        });
}

function fetchNodesForAdd() {
    fetch('/get_nodes')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const container = document.getElementById('addNodesContainer');
                container.innerHTML = '';
                
                if (data.nodes.length > 0) {
                    data.nodes.forEach(node => {
                        const nodeElement = document.createElement('label');
                        const isOnline = node.status === 'online';
                        
                        nodeElement.className = `custom-checkbox flex items-center gap-3 p-2 rounded-lg mb-2 cursor-pointer ${!isOnline ? 'opacity-50' : ''}`;
                        nodeElement.innerHTML = `
                            <input type="checkbox" name="selected_nodes" value="${node.id}" 
                                   class="absolute opacity-0"
                                   ${!isOnline ? 'disabled' : ''}>
                            <span class="checkmark bg-gray-600 border-2 ${isOnline ? 'border-gray-500' : 'border-red-500'} rounded-md"></span>
                            <span class="text-sm">${node.name} (${node.ip_address}) ${!isOnline ? '(Offline)' : ''}</span>
                        `;
                        container.appendChild(nodeElement);
                    });
                } else {
                    container.innerHTML = '<p class="text-sm text-gray-400">No nodes available. Add nodes first.</p>';
                }
            }
        })
        .catch(error => {
            console.error("Error fetching nodes:", error);
            const container = document.getElementById('addNodesContainer');
            container.innerHTML = '<p class="text-sm text-red-400">Error loading nodes</p>';
        });
}

function fetchNodesForEdit(allowedNodes = []) {
    fetch('/get_nodes')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const container = document.getElementById('editNodesContainer');
                container.innerHTML = '';
                
                if (data.nodes.length > 0) {
                    data.nodes.forEach(node => {
                        const isChecked = allowedNodes.includes(node.id.toString());
                        const isOnline = node.status === 'online';
                        
                        const nodeElement = document.createElement('label');
                        nodeElement.className = `custom-checkbox flex items-center gap-3 p-2 rounded-lg mb-2 cursor-pointer ${!isOnline ? 'opacity-50' : ''}`;
                        nodeElement.innerHTML = `
                            <input type="checkbox" name="selected_nodes" value="${node.id}" 
                                   class="absolute opacity-0"
                                   ${isChecked ? 'checked' : ''}
                                   ${!isOnline ? 'disabled' : ''}>
                            <span class="checkmark bg-gray-600 border-2 ${isOnline ? 'border-gray-500' : 'border-red-500'} rounded-md"></span>
                            <span class="text-sm">${node.name} (${node.ip_address}) ${!isOnline ? '(Offline)' : ''}</span>
                        `;
                        
                        container.appendChild(nodeElement);
                    });
                } else {
                    container.innerHTML = '<p class="text-sm text-gray-400">No nodes available. Add nodes first.</p>';
                }
            }
        })
        .catch(error => {
            console.error("Error fetching nodes:", error);
        });
}

function openEditModal(username, expiryDate, maxClients, dataLimit, dataLimitUnit) {
    document.getElementById('edit_expiry_date').value = expiryDate || '';
    document.getElementById('edit_max_clients').value = maxClients || '1';
    
    if (dataLimit) {
        document.getElementById('edit_data_limit').value = dataLimit;
        if (dataLimitUnit === 'MB') {
            document.getElementById('edit_data_limit_unit_mb').checked = true;
        } else {
            document.getElementById('edit_data_limit_unit_gb').checked = true;
        }
    } else {
        document.getElementById('edit_data_limit').value = '';
        document.getElementById('edit_data_limit_unit_gb').checked = true;
    }
    
    document.getElementById('editForm').action = `/edit_user/${username}`;
    document.getElementById('editModal').dataset.username = username;
    document.getElementById('editModal').classList.remove('hidden');
    
    loadUserNodes(username);
    
    fetch(`/get_traffic_usage/${username}`)
        .then(response => response.json())
        .then(data => {
            const downloadMB = (data.download / (1024 * 1024)).toFixed(2);
            const uploadMB = (data.upload / (1024 * 1024)).toFixed(2);
            const totalMB = (data.total / (1024 * 1024)).toFixed(2);
            
            document.getElementById('edit-download').textContent = `${downloadMB} MB`;
            document.getElementById('edit-upload').textContent = `${uploadMB} MB`;
            document.getElementById('edit-total').textContent = `${totalMB} MB`;
        })
        .catch(error => {
            console.error("Error fetching traffic data:", error);
        });
}

let currentDeleteUsername = '';

function openDeleteConfirmModal(username) {
    currentDeleteUsername = username;
    document.getElementById('deleteConfirmText').textContent = 
        `Are you sure you want to delete user ${username}?`;
    document.getElementById('deleteConfirmModal').classList.remove('hidden');
}

function closeDeleteConfirmModal() {
    document.getElementById('deleteConfirmModal').classList.add('hidden');
}

function confirmDelete() {
    if (!currentDeleteUsername) {
        closeDeleteConfirmModal();
        return;
    }
    
    window.location.href = `/delete_user/${currentDeleteUsername}`;
}

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('a[href^="/delete_user/"]').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const username = this.getAttribute('href').split('/')[2];
            openDeleteConfirmModal(username);
        });
    });
});

function getUserConnections(username) {
    return fetch(`/get_user_connections/${username}`)
        .then(response => response.json())
        .then(data => {
            return data.connections;
        })
        .catch(error => {
            console.error("Error fetching user connections:", error);
            return [];
        });
}

function setupConnectionTooltips() {
    document.querySelectorAll('.connection-badge').forEach(badge => {
        const username = badge.getAttribute('data-username');
        
        const tooltip = document.createElement('div');
        tooltip.className = 'connection-tooltip';
        badge.appendChild(tooltip);
        
        badge.addEventListener('mouseenter', async () => {
            const connections = await getUserConnections(username);
            
            if (connections.length > 0) {
                let tooltipContent = '<div class="flex flex-col gap-1">';
                
                connections.forEach(conn => {
                    const iconClass = conn.server === 'main' ? 'main' : 'node';
                    const serverName = conn.server === 'main' ? 'Main Server' : `Node: ${conn.server}`;
                    
                    tooltipContent += `
                        <div class="flex items-center">
                            <span class="server-icon ${iconClass}">
                                ${conn.server === 'main' ? 
                                    '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line><line x1="14.83" y1="14.83" x2="19.07" y2="19.07"></line><line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line><line x1="14.83" y1="9.17" x2="18.36" y2="5.64"></line><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line></svg>' : 
                                    '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle></svg>'}
                            </span>
                            <span>${serverName}</span>
                        </div>
                    `;
                });
                
                tooltipContent += '</div>';
                tooltip.innerHTML = tooltipContent;
            } else {
                tooltip.innerHTML = 'No active connections';
            }
        });
    });
}

document.addEventListener('DOMContentLoaded', () => {
    setupConnectionTooltips();
});

function openDownloadOptionsModal(username) {
    fetch(`/get_download_options/${username}`)
        .then(response => response.json())
        .then(data => {
            const downloadList = document.getElementById('downloadOptionsList');
            downloadList.innerHTML = '';
            
            data.options.forEach(option => {
                const downloadItem = document.createElement('div');
                downloadItem.className = 'mb-4';
                
                downloadItem.innerHTML = `
                    <a href="${option.download_url}" class="bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white px-4 py-3 rounded-lg flex items-center justify-between gap-2 w-full">
                        <div class="flex items-center gap-2">
                            <span class="server-icon ${option.server === 'main' ? 'main' : 'node'}">
                                ${option.server === 'main' ? 
                                    '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="4.93" y1="4.93" x2="9.17" y2="9.17"></line><line x1="14.83" y1="14.83" x2="19.07" y2="19.07"></line><line x1="14.83" y1="9.17" x2="19.07" y2="4.93"></line><line x1="14.83" y1="9.17" x2="18.36" y2="5.64"></line><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"></line></svg>' : 
                                    '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle></svg>'}
                            </span>
                            <span>${option.server === 'main' ? 'Main Server' : `Node: ${option.name}`}</span>
                        </div>
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                        </svg>
                    </a>
                `;
                
                downloadList.appendChild(downloadItem);
            });
            
            document.getElementById('downloadOptionsModal').classList.remove('hidden');
        })
        .catch(error => {
            console.error("Error fetching download options:", error);
        });
}

function closeDownloadOptionsModal() {
    document.getElementById('downloadOptionsModal').classList.add('hidden');
}

document.querySelectorAll('a[href*="/download_ovpn/"]').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const username = this.getAttribute('href').split('/')[2];
        openDownloadOptionsModal(username);
    });
});

function filterUsers() {
    const searchInput = document.getElementById('searchInput').value.toLowerCase();
    const userItems = document.querySelectorAll('.user-item');

    userItems.forEach(user => {
        const username = user.querySelector('.username').textContent.toLowerCase();
        if (username.includes(searchInput)) {
            user.style.display = '';
        } else {
            user.style.display = 'none';
        }
    });
}

function openAddUserModal() {
    document.getElementById('addUserModal').classList.remove('hidden');
    fetchNodesForAdd();
}

function closeAddUserModal() {
    document.getElementById('addUserModal').classList.add('hidden');
}

let currentResetUsername = '';

function openResetConfirmModal(username) {
    currentResetUsername = username;
    document.getElementById('resetConfirmText').textContent = 
        `Are you sure you want to reset traffic for ${username}?`;
    document.getElementById('resetConfirmModal').classList.remove('hidden');
}

function closeResetConfirmModal() {
    document.getElementById('resetConfirmModal').classList.add('hidden');
}

function confirmResetTraffic() {
    if (!currentResetUsername) {
        closeResetConfirmModal();
        return;
    }
    
    fetch(`/reset_traffic/${currentResetUsername}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('edit-download').textContent = '0 MB';
            document.getElementById('edit-upload').textContent = '0 MB';
            document.getElementById('edit-total').textContent = '0 MB';
            
            updateTrafficUsage(currentResetUsername);
            
            showAlert('success', `Traffic for ${currentResetUsername} reset successfully`);
        } else {
            showAlert('error', `Failed to reset traffic: ${data.message}`);
        }
        closeResetConfirmModal();
    })
    .catch(error => {
        console.error("Error resetting traffic:", error);
        showAlert('error', 'Error resetting traffic');
        closeResetConfirmModal();
    });
}

function resetUserTraffic() {
    const username = document.getElementById('editModal').dataset.username;
    if (!username) return;
    
    openResetConfirmModal(username);
}

function closeEditModal() {
    document.getElementById('editModal').classList.add('hidden');
}

function toggleUserStatus(username, isActive) {
    fetch(`/toggle_user_status/${username}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({ isActive: isActive }),
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            window.location.reload();
        } else {
            alert(data.message || "Failed to toggle user status.");
        }
    })
    .catch(error => {
        console.error("Error:", error);
    });
}

function updateUserStatusUI(username, user) {
    const isOnline = user.active > 0;

    document.querySelectorAll(`.status-circle-${username}`).forEach(circle => {
        circle.classList.toggle('online', isOnline);
        circle.classList.toggle('offline', !isOnline);
    });

    document.querySelectorAll(`.user-connections-${username}`).forEach(el => {
        el.textContent = `👤${user.max_clients}/${user.active}`;
    });

    const downloadBytes = user.bytes_received;
    const uploadBytes = user.bytes_sent;
    const totalBytes = downloadBytes + uploadBytes;

    const totalFormatted = formatBytes(totalBytes);
    const downloadFormatted = formatBytes(downloadBytes);
    const uploadFormatted = formatBytes(uploadBytes);

    const limitText = user.data_limit ? ` / ${user.data_limit} ${user.data_limit_unit}` : ` /  Unlimited`;

    const totalDesktop = document.getElementById(`total-${username}`);
    if (totalDesktop) totalDesktop.innerHTML = `${totalFormatted}${limitText}`;

    const totalMobile = document.getElementById(`total-mobile-${username}`);
    if (totalMobile) totalMobile.innerHTML = `${totalFormatted}${limitText}`;

    const downloadDesktop = document.getElementById(`download-details-${username}`);
    const uploadDesktop = document.getElementById(`upload-details-${username}`);
    if (downloadDesktop) downloadDesktop.innerHTML = `<svg class="inline h-4 w-4 mr-1 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 8l-4 5h3v7h2v-7h3l-4-5zM3 4v2h18V4H3z"/>
        </svg> ${downloadFormatted}`;
    if (uploadDesktop) uploadDesktop.innerHTML = `<svg class="inline h-4 w-4 mr-1 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 16l4-5h-3V4h-2v7H8l4 5zm-9 2v2h18v-2H3z"/>
        </svg> ${uploadFormatted}`;

    const downloadMobile = document.getElementById(`download-details-mobile-${username}`);
    const uploadMobile = document.getElementById(`upload-details-mobile-${username}`);
    if (downloadMobile) downloadMobile.innerHTML = `<svg class="inline h-4 w-4 mr-1 text-blue-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 8l-4 5h3v7h2v-7h3l-4-5zM3 4v2h18V4H3z"/>
        </svg> ${downloadFormatted}`;
    if (uploadMobile) uploadMobile.innerHTML = `<svg class="inline h-4 w-4 mr-1 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 16l4-5h-3V4h-2v7H8l4 5zm-9 2v2h18v-2H3z"/>
        </svg> ${uploadFormatted}`;
}

function updateTrafficUsage(username) {
    fetch(`/get_traffic_usage/${username}`)
        .then(response => response.json())
        .then(data => {
            let download, download_unit;
            if (data.download < 1024**2) {
                download = (data.download / 1024).toFixed(2);
                download_unit = "KB";
            } else if (data.download < 1024**3) {
                download = (data.download / (1024**2)).toFixed(2);
                download_unit = "MB";
            } else {
                download = (data.download / (1024**3)).toFixed(2);
                download_unit = "GB";
            }

            let upload, upload_unit;
            if (data.upload < 1024**2) {
                upload = (data.upload / 1024).toFixed(2);
                upload_unit = "KB";
            } else if (data.upload < 1024**3) {
                upload = (data.upload / (1024**2)).toFixed(2);
                upload_unit = "MB";
            } else {
                upload = (data.upload / (1024**3)).toFixed(2);
                upload_unit = "GB";
            }

            let total, total_unit;
            if (data.total < 1024**2) {
                total = (data.total / 1024).toFixed(2);
                total_unit = "KB";
            } else if (data.total < 1024**3) {
                total = (data.total / (1024**2)).toFixed(2);
                total_unit = "MB";
            } else {
                total = (data.total / (1024**3)).toFixed(2);
                total_unit = "GB";
            }

            const limit = data.limit ? data.limit : null;
            const limit_unit = data.limit_unit || 'GB';
            const isExpired = data.is_expired;
            const isDataLimited = data.is_data_limited;

            const totalElement = document.getElementById(`total-${username}`);
            if (totalElement) {
                let content = `${total} ${total_unit}`;
                if (limit) content += ` / ${limit} ${limit_unit}`;
                if (isDataLimited) {
                    content += ` <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-orange-500 inline ml-1" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /></svg>`;
                } else if (!limit) {
                    content += ` <span class="text-xs opacity-70">/  Unlimited</span>`;
                }
                totalElement.innerHTML = content;
            }

            const totalMobileElement = document.getElementById(`total-mobile-${username}`);
            if (totalMobileElement) {
                let content = `${total} ${total_unit}`;
                if (limit) content += ` / ${limit} ${limit_unit}`;
                if (isDataLimited) {
                    content += ` <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-orange-500" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" /></svg>`;
                } else if (!limit) {
                    content += ` <span class="text-xs opacity-70">/  Unlimited</span>`;
                }
                totalMobileElement.innerHTML = content;
            }

            const downloadElement = document.getElementById(`download-details-${username}`);
            const uploadElement = document.getElementById(`upload-details-${username}`);
            if (downloadElement && uploadElement) {
                downloadElement.innerHTML = `
                    <svg class="traffic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
                    </svg>
                    ${download} ${download_unit}
                `;
                uploadElement.innerHTML = `
                    <svg class="traffic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>
                    </svg>
                    ${upload} ${upload_unit}
                `;
            }

            const downloadMobileElement = document.getElementById(`download-details-mobile-${username}`);
            const uploadMobileElement = document.getElementById(`upload-details-mobile-${username}`);
            if (downloadMobileElement && uploadMobileElement) {
                downloadMobileElement.innerHTML = `
                    <svg class="traffic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/>
                    </svg>
                    ${download} ${download_unit}
                `;
                uploadMobileElement.innerHTML = `
                    <svg class="traffic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>
                    </svg>
                    ${upload} ${upload_unit}
                `;
            }
        })
        .catch(error => {
            console.error("Error updating traffic usage:", error);
        });
}

function syncUserToNodes(username, action) {
    fetch(`/sync_user_to_nodes/${username}?action=${action}`, {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', `User ${username} synced to all nodes`);
        } else {
            showAlert('error', `Failed to sync user: ${data.message}`);
        }
    })
    .catch(error => {
        showAlert('error', `Error syncing user: ${error.message}`);
    });
}

function handleAddUserSuccess(username) {
    showAlert('success', `User ${username} added successfully`);
    syncUserToNodes(username, 'add');
    closeAddUserModal();
    window.location.reload();
}

function updateDashboard() {
    fetch("/get_dashboard_stats")
        .then(response => response.json())
        .then(data => {
            const stats = {
                onlineUsersCount: data.onlineUsersCount,
                totalUsersCount: data.totalUsersCount,
                expiredUsersCount: data.expiredUsersCount,
                disabledUsersCount: data.disabledUsersCount,
                activeNodesCount: data.activeNodesCount,
                totalTraffic: formatBytes(data.totalTraffic),
                uploadTraffic: formatBytes(data.totalUpload),
                downloadTraffic: formatBytes(data.totalDownload),
            };

            for (const [id, value] of Object.entries(stats)) {
                const el = document.getElementById(id);
                if (el) {
                    el.textContent = value;
                    localStorage.setItem(id, value);
                }
            }

            data.users.forEach(user => {
                updateUserStatusUI(user.username, user);
            });
        })
        .catch(error => {
            console.error("Error updating dashboard:", error);
        });
}

document.addEventListener("DOMContentLoaded", () => {
    const statIds = [
        "onlineUsersCount",
        "totalUsersCount",
        "expiredUsersCount",
        "disabledUsersCount",
        "totalTraffic",
        "uploadTraffic",
        "downloadTraffic",
        "activeNodesCount"
    ];

    statIds.forEach(id => {
        const cached = localStorage.getItem(id);
        if (cached && document.getElementById(id)) {
            document.getElementById(id).textContent = cached;
        }
    });

    updateDashboard();
    setInterval(updateDashboard, 5000);
});
</script>
{% endblock %}