{{define "title"}}Security Events{{end}}
{{define "content"}}
<div class="flex items-center justify-between mb-6">
  <h1 class="text-xl font-bold text-white">Security Events</h1>
  <div class="flex gap-2">
    <a href="/admin/events?limit=100" class="btn btn-primary btn-sm">100</a>
    <a href="/admin/events?limit=200" class="btn btn-primary btn-sm">200</a>
    <a href="/admin/events?limit=500" class="btn btn-primary btn-sm">500</a>
  </div>
</div>

<div class="card" style="padding:0;overflow:hidden">
  {{if .Events}}
  <table>
    <thead>
      <tr>
        <th>Time</th>
        <th>Type</th>
        <th>IP</th>
        <th>User ID</th>
        <th>Detail</th>
      </tr>
    </thead>
    <tbody>
    {{range .Events}}
    <tr>
      <td class="text-gray-400 text-xs white-space-nowrap">{{shortTime .CreatedAt}}</td>
      <td>
        {{$t := .Type}}
        {{if eq $t "login_failed"}}<span class="badge badge-red">{{$t}}</span>
        {{else if eq $t "ip_banned"}}<span class="badge badge-red">{{$t}}</span>
        {{else if eq $t "login_ok"}}<span class="badge badge-green">{{$t}}</span>
        {{else}}<span class="badge badge-gray">{{$t}}</span>{{end}}
      </td>
      <td class="font-mono text-xs">{{.IP}}</td>
      <td class="text-gray-400 text-xs">{{if .UserID.Valid}}{{.UserID.Int64}}{{end}}</td>
      <td class="text-gray-300 text-xs">{{.Detail}}</td>
    </tr>
    {{end}}
    </tbody>
  </table>
  {{else}}
  <div class="p-8 text-center text-gray-500 text-sm">No security events recorded.</div>
  {{end}}
</div>
{{end}}