{% extends 'adminpanel/base.html' %}
{% block title %}Accounts · Admin Dashboard{% endblock %}
{% block page_title %}Accounts{% endblock %}
{% block content %}
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Capital Total</div>
    <div class="text-2xl font-semibold">{{ totals.capital|default:"0.00" }}</div>
  </div>
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Profit Total</div>
    <div class="text-2xl font-semibold">{{ totals.profit|default:"0.00" }}</div>
  </div>
  <div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
    <div class="text-sm text-slate-400">Bonus Total</div>
    <div class="text-2xl font-semibold">{{ totals.bonus|default:"0.00" }}</div>
  </div>
</div>

<div class="p-4 rounded-xl bg-slate-900 border border-slate-800">
  <h2 class="font-semibold mb-3">Top Accounts (by Capital)</h2>
  <div class="overflow-x-auto">
    <table class="min-w-full text-sm">
      <thead class="text-slate-400">
        <tr>
          <th class="text-left py-2 pr-4">User</th>
          <th class="text-left py-2 pr-4">Currency</th>
          <th class="text-left py-2 pr-4">Capital</th>
          <th class="text-left py-2 pr-4">Profit</th>
          <th class="text-left py-2 pr-4">Bonus</th>
          <th class="text-left py-2 pr-4">Total</th>
        </tr>
      </thead>
      <tbody>
        {% for a in top_accounts %}
          <tr class="border-t border-slate-800">
            <td class="py-2 pr-4">{{ a.user.username }}</td>
            <td class="py-2 pr-4">{{ a.currency }}</td>
            <td class="py-2 pr-4">{{ a.capital_balance }}</td>
            <td class="py-2 pr-4">{{ a.profit_balance }}</td>
            <td class="py-2 pr-4">{{ a.bonus_balance }}</td>
            <td class="py-2 pr-4">{{ a.total_balance }}</td>
          </tr>
        {% empty %}
          <tr><td colspan="6" class="py-4 text-slate-400">No accounts yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}