{{define "body-dashboard"}}
<div style="padding:20px">
  <h2>Dashboard</h2>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:16px" id="dashGrid"></div>
</div>
<script>
API.get('/api/dashboard').then(function(d){
  var grid = $('#dashGrid');
  var items = [
    {label:'Rooms',value:d.roomCount},
    {label:'Items',value:d.itemCount},
    {label:'Objects',value:d.objectCount},
    {label:'Mobs',value:d.mobCount},
    {label:'Players',value:d.playerCount},
    {label:'Accounts',value:d.accountCount}
  ];
  grid.innerHTML = items.map(function(i){
    return '<div style="background:var(--panel);border:1px solid var(--border);padding:16px;border-radius:4px;text-align:center"><div style="font-size:28px;font-weight:bold">'+i.value+'</div><div style="font-size:11px;color:#888;margin-top:4px">'+i.label+'</div></div>';
  }).join('');
}).catch(function(e){notify('Failed: '+e.message,'error')});
</script>
{{end}}