{{ define "stats_title" }}Statistics{{ end }}
{{ define "stats_content" }}
<h1 class="text-2xl font-semibold text-white mb-4">Statistics</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
  <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
    <div class="text-sm text-gray-400">Total IPs</div>
    <div class="text-3xl font-bold text-primary-400">{{ index .Stats "total_ips" }}</div>
  </div>
  <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
    <div class="text-sm text-gray-400">Blacklisted</div>
    <div class="text-3xl font-bold text-primary-400">{{ index .Stats "blacklisted_ips" }}</div>
  </div>
  <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
    <div class="text-sm text-gray-400">Connections</div>
    <div class="text-3xl font-bold text-primary-400">{{ index .Stats "total_connections" }}</div>
  </div>
  <div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
    <div class="text-sm text-gray-400">Auth Attempts</div>
    <div class="text-3xl font-bold text-primary-400">{{ index .Stats "total_auth_attempts" }}</div>
  </div>
</div>
<div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
  <h2 class="text-xl font-semibold text-white mb-3">Service Activity</h2>
  <div class="overflow-x-auto">
    <table class="min-w-full divide-y divide-gray-700">
      <thead class="bg-gray-800">
        <tr>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Service</th>
          <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Connections</th>
        </tr>
      </thead>
      <tbody class="bg-gray-900 divide-y divide-gray-800">
        {{ range $svc, $cnt := .ServiceStats }}
        <tr>
          <td class="px-4 py-2 text-sm text-gray-300">{{ $svc }}</td>
          <td class="px-4 py-2 text-sm text-gray-300">{{ $cnt }}</td>
        </tr>
        {{ else }}
        <tr>
          <td class="px-4 py-4 text-sm text-gray-400" colspan="2">No data.</td>
        </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
</div>
{{ end }}