{include file="sections/header.tpl"}
<div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <div class="card card-hovered mb20 card">
          <div class="card-header">{Lang::T('Hotspot Users')}</div>
          <div class="card-body">
            <div class="table-responsive table_mobile">
              <table id="hotspot_users_table" class="table table-bordered table-striped table-condensed">
                <thead>
                  <tr>
                    <th>{Lang::T('Username')}</th>
                    <th>{Lang::T('Address')}</th>
                    <th>{Lang::T('Uptime')}</th>
                    <th>{Lang::T('Server')}</th>
                    <th>{Lang::T('MAC Address')}</th>
                    <th>{Lang::T('Session Time')}</th>
                    <th style="color: red;">{Lang::T('Upload')}</th>
                    <th style="color: green;">{Lang::T('Download')}</th>
                    <th>{Lang::T('Total')}</th>
                    <th>{Lang::T('Action')}</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- DataTables will populate the table body dynamically -->
                </tbody>
              </table>
            </div>
          </div>
        </div>
        {include file="pagination.tpl"}
      </div>
    </div>
</div>
{include file="sections/footer.tpl"}

<!-- Include jQuery and DataTables JS CDN -->
<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function() {
    $('#hotspot_users_table').DataTable({
      "ajax": {
        "url": "{$_url}onlineusers/hotspot_users",
        "dataSrc": ""
      },
      "columns": [
        { "data": "username", "render": function(data, type, row) {
            return '<span style="color: blue;">' + data + '</span>';
          }
        },
        { "data": "address" },
        { "data": "uptime" },
        { "data": "server" },
        { "data": "mac" },
        { "data": "session_time" },
        { "data": "rx_bytes" },
        { "data": "tx_bytes" },
        { "data": "total" },
        { "data": null, "render": function(data, type, row) {
            return '<form method="post" action="{$_url}onlineusers/disconnect/{$routerId}/' + row.username + '/hotspot">' +
                   '<button type="submit" class="btn btn-danger btn-sm" title="Disconnect"><i class="fa fa-times"></i></button>' +
                   '</form>';
          }
        }
      ]
    });
  });
</script>