{{define "body-players"}}
<div style="padding:20px">
  <h2>Players</h2>
  <div class="search-bar" style="max-width:400px"><input placeholder="Search players..." id="playerSearch" oninput="searchPlayers()"></div>
  <table class="table" style="margin-top:12px">
    <thead><tr><th>Name</th><th>Level</th><th>Room</th><th>Account</th></tr></thead>
    <tbody id="playerTableBody"></tbody>
  </table>
</div>
<script>
API.get('/api/players').then(function(r){
  var tbody = $('#playerTableBody');
  var players = r.players || r || [];
  window._players = players;
  renderPlayerTable('');
}).catch(function(e){notify('Failed: '+e.message,'error')});
function searchPlayers(){
  var q = ($('#playerSearch').value||'').toLowerCase();
  renderPlayerTable(q);
}
function renderPlayerTable(q){
  var tbody = $('#playerTableBody');
  var rows = (window._players||[]).filter(function(p){
    var name = (p.name||p.Name||'').toLowerCase();
    return !q || name.indexOf(q) >= 0;
  }).map(function(p){
    return '<tr><td>'+esc(p.name||p.Name)+'</td><td>'+esc(p.level||p.Level)+'</td><td>'+esc(p.room||p.Room)+'</td><td>'+esc(p.account||p.Account)+'</td></tr>';
  });
  tbody.innerHTML = rows.join('') || '<tr><td colspan="4" style="color:#888">No players found</td></tr>';
}
function esc(s) { return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
</script>
{{end}}