<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Hotspot Users</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>
    <style>
        table.dataTable thead th, table.dataTable thead td {
            padding: 12px 18px;
            border-bottom: 2px solid #e2e8f0;
        }
        table.dataTable tbody td {
            padding: 10px 18px;
            border-bottom: 1px solid #e2e8f0;
        }
        .disconnect-btn {
            padding: 8px 12px;
            background-color: #4f46e5; /* Tailwind indigo-600 */
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .disconnect-btn:hover {
            background-color: #4338ca; /* Tailwind indigo-700 */
        }
        .disconnect-btn:active {
            background-color: #3730a3; /* Tailwind indigo-800 */
        }
    </style>
</head>

<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-6">Online Hotspot Users</h1>
        <div class="overflow-x-auto bg-white shadow-md rounded-lg">
            <table id="hotspotUsersTable" class="min-w-full leading-normal" style="width:100%">
                <thead class="bg-gray-200">
                    <tr>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Username</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Address</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Uptime</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Server</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-700 uppercase">MAC</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Session Time</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Rx Bytes</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Tx Bytes</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Total Bytes</th>
                        <th class="px-5 py-3 text-left text-xs font-semibold text-gray-700 uppercase">Action</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $onlineHotspotUsers as $user}
                    <tr class="bg-white hover:bg-gray-50">
                        <td class="px-5 py-4 text-sm text-gray-900">{$user.username}</td>
                        <td class="px-5 py-4 text-sm text-gray-900">{$user.address}</td>
                        <td class="px-5 py-4 text-sm text-gray-900">{$user.uptime}</td>
                        <td class="px-5 py-4 text-sm text-gray-900">{$user.server}</td>
                        <td class="px-5 py-4 text-sm text-gray-900">{$user.mac}</td>
                        <td class="px-5 py-4 text-sm text-gray-900">{$user.session_time}</td>
                        <td class="px-5 py-4 text-sm text-gray-900">{$user.rx_bytes}</td>
                        <td class="px-5 py-4 text-sm text-gray-900">{$user.tx_bytes}</td>
                        <td class="px-5 py-4 text-sm text-gray-900">{$user.total}</td>
                        <td class="px-5 py-4 text-sm">
                            <button class="disconnect-btn" onclick="disconnectUser('{$user.username}')">Disconnect</button>
                        </td>
                    </tr>
                    {/foreach}
                </tbody>
            </table>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('#hotspotUsersTable').DataTable();
        });

        function disconnectUser(username) {
            alert('Disconnecting user: ' + username);
        }
    </script>
</body>
</html>

